js全选和反选

最新推荐文章于 2025-04-28 16:10:13 发布

原创最新推荐文章于 2025-04-28 16:10:13 发布 · 100 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js

本文介绍了一种使用JavaScript实现的全选复选框与多个子复选框联动的方法。当点击全选按钮时，所有子复选框的状态将被同步。同样，当所有子复选框都被选中时，全选按钮也会自动选中；反之，只要有一个子复选框未被选中，全选按钮就会自动取消选中状态。

<input type="checkbox" id="all">全选
<input type="checkbox" class="a">
<input type="checkbox" class="a">
<input type="checkbox" class="a">
<input type="checkbox" class="a">
<script>
    var all=document.getElementById("all");
    var a=document.getElementsByClassName("a");
    all.onclick=function () {
        for(var i=0;i<a.length;i++){
        a[i].checked=all.checked
    }
    }

    for(j=0;j<a.length;j++){
        a[j].onclick=function () {
            var lll=0
            for(var k=0;k<a.length;k++){
            if(a[k].checked==false){
                all.checked=false
                }else {lll++}
                if(lll==4){all.checked=true}
                else {all.checked=false}
            }
        }
    }
</script>