jquery实现checkbox全选，全不选

最新推荐文章于 2021-03-10 19:26:35 发布

原创最新推荐文章于 2021-03-10 19:26:35 发布 · 611 阅读

0 ·

CC 4.0 BY-SA版权

javascript和juery脚本专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现网页中复选框全选功能的方法。通过客户端脚本控制多个复选框的状态，提高了用户体验。文章提供了具体的实现代码，并强调了在使用该功能时应注意的问题。

<%@ 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>

调用时：