jquery实现checkbox全选，全不选

来源：互联网发布：mysql控制台命令编辑：程序博客网时间：2024/05/29 08:40

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server">    <title>复选框全选</title>    <script src="Scripts/jquery-1.4.1.js" type="text/javascript">      </script>      <script type="text/javascript">          $(function () {              $("#Checkbox1").click(function () {                  $('input[name="Checkbox2"]').attr("checked", this.checked);                  var subBox = $('input[name="Checkbox2"]')                  subBox.click(function () {                      $("#Checkbox1").attr("checked",subBox.length==$('input[name="Checkbox2"]:checked').length?true:false);                  });              });          });  </script></head><body>     <form id="form1" runat="server">    <div>    <table>       <tr>       <td>           <input id="Checkbox1" type="checkbox" />       </td>       </tr>       <tr>       <td>           <input name="Checkbox2" type="checkbox" />       </td>       <td>           <input name="Checkbox2" type="checkbox" />       </td>       <td>           <input name="Checkbox2" type="checkbox" />   </td>       </tr>    </table>           </div>    </form></body></html>

javascript实现复选框的全选功能

复选框的全选功能在Web开发中使用非常频繁，而实现的方法一般分为两种：客户端实现与服务器端实现。
服务器端实现需要与服务器端交互，因此效率较差。今天向大家介绍一下用脚本在客户端实现此功能的方法。
效果如图

当点击按钮或全选复选框时，上表中的所有数据被钩上。
下面是js代码：

<script type="text/javascript">    //根据传入的checkbox的选中状态设置所有checkbox的选中状态     function selectAll(obj)    {         var allInput = document.getElementsByTagName("input");        //alert(allInput.length);         var loopTime = allInput.length;        for(i = 0;i < loopTime;i++)        {            //alert(allInput[i].type);            if(allInput[i].type == "checkbox")            {                 allInput[i].checked = obj.checked;             }         }     }</script>

调用时：

全选就可实现了。
由于是在客户端完成此效果，所以控件不能使用服务器端控件，否则无效。