Jquery之复选框全选or全不选

最新推荐文章于 2023-03-29 23:13:48 发布

songfelicity

最新推荐文章于 2023-03-29 23:13:48 发布

阅读量264

点赞数

CC 4.0 BY-SA版权

分类专栏： Jquery 文章标签： Jquery JS 复选框全选全不选

本文链接：https://blog.youkuaiyun.com/songxinfeng1989/article/details/81218549

Jquery 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种实现网页中复选框全选功能的方法，并通过两个JavaScript函数实现了主复选框与子复选框的状态同步。当点击主复选框时，所有子复选框的状态随之改变；反之，当所有子复选框被选中或取消选中时，主复选框的状态也会相应更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

虽然并不复杂，为了方便使用，存在此处方便复制粘贴。蓝色字体为代码部分：

主复选框 id="fcheck" onclick="javascript:checkall(this)"
   子复选框 onclick="javascript:fchk()" 所有子复选框外层有个id="list"的节点

   function checkall(checkbox) {//全选 or全不选
       $("#list input[type=checkbox]").prop('checked', $(checkbox).prop('checked'));
       //id=list元素下所有type=CheckBox也就是所有复选框，添加属性 checked，值为 id=checkbox元素当前checked值。
       //设置所有子复选框与主复选框相同

   }

   function fchk(){
       // 根据是否全选/全不选更改父checkbok状态
   var $subBox = $("#list input[type=checkbox]");
       //获取所有子复选框
   alert($("#list input[type=checkbox]:checked").length );
       //为了调试打印复选框的个数
        if($subBox.length == $("#list input[type=checkbox]:checked").length ){
   ?//如果选中的复选框与总数相等，则是全选状态，
           $("#fcheck").prop('checked','checked');
           //将主复选框设置为选中状态
        }else{
       //否则就代表未全选
       $("#fcheck").removeAttr("checked");
           ? //将主复选框设置为未选中状态
        }
   }