JS判断checkbox是否全被选中，当手动将所有checkbox都选中时，全选checkbox自动选中

最新推荐文章于 2025-03-29 10:30:48 发布

羽公子

最新推荐文章于 2025-03-29 10:30:48 发布

阅读量6.2k

点赞数 3

分类专栏：笔记文章标签： javascript

本文链接：https://blog.youkuaiyun.com/qq_35333936/article/details/84035150

版权

笔记专栏收录该内容

31 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现复选框全选与反选功能的方法。通过监听全选按钮和各子项复选框的状态变化，自动同步所有复选框的选择状态。适用于需要批量操作选项的场景。

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

JS判断checkbox是否全被选中，当手动将所有checkbox都选中时，全选checkbox自动选中

html代码

<input type="checkbox" id="topBtn">全选/取消
    <ul>
        <li>
            <input type="checkbox" class="item">大咪
        </li>
        <li>
            <input type="checkbox" class="item">二咪
        </li>
        <li>
            <input type="checkbox" class="item">三咪
        </li>
        <li>
            <input type="checkbox" class="item">小咪
        </li>
    </ul>

js代码

 var items=document.getElementsByClassName('item');
 var topBtn=document.getElementById('topBtn');

 //为全选checkbox添加事件
 topBtn.onchange=function(){
     for(var i=0;i<items.length;i++){
         items[i].checked=this.checked;
     }
 };

 //遍历所有的items，绑定onchange事件
 for(var i=0;i<items.length;i++){
     items[i].onchange=function(){
         qxFn();
     };
 }
 var qxFn=function(){
     var count=0;//定义一个计数变量
     for(var j=0;j<items.length;j++){//遍历items
         if(items[j].checked==true){//如果状态为选中，count+1
             count++;
         }
         if(count==items.length){//如果被选中的个数等于items的长度
             topBtn.checked=true;//全选checkbox选中
         }else{
             topBtn.checked=false;//全选checkbox不选中
         }
     }
 };