多选

最新推荐文章于 2023-09-09 17:06:46 发布

fanrax

最新推荐文章于 2023-09-09 17:06:46 发布

阅读量235

点赞数

分类专栏： jsdemo 文章标签： jsdemo

本文链接：https://blog.csdn.net/qq_41925937/article/details/80647846

版权

jsdemo 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
全部:<input type="checkbox" id="all">
<div id="rua">
    第一个:<input type="checkbox">
    第二个:<input type="checkbox">
    第三个:<input type="checkbox">
    第五个:<input type="checkbox">
    第四个:<input type="checkbox">
</div>
<script>
    window.οnlοad=function(){
        var oAll=document.getElementById("all");
        var oRua=document.getElementById("rua");
        var aCheck=oRua.getElementsByTagName("input");

        //全选被点击时发生的时间
       oAll.οnclick=function(){
           //循环除了全选外的所有多选框
          for(var i=0;i<aCheck.length;i++){
              //this指向的是全选div，即点击全选时所有多选按钮的状态变的和全选框状态一样；
              aCheck[i].checked=this.checked;
          }
       }
        //循环除了全选外的所有多选按钮
        for(var i=0;i<aCheck.length;i++){
            //当子元素多选框被点击时发生的时间
            aCheck[i].οnclick=function(){
                //建一个变量用来后面储存数组个数
                var num=0;
                //循环数组
                for(var j=0;j<aCheck.length;j++){
                    //判断当子复选框被选中时让变量num+1，
                    if(aCheck[j].checked==true)
                    {
                        num++;
                    }
                }
                //当num值等于数组长度即所有子项都被选中
                if(num==aCheck.length){
                    //所有子项被选中时让全选也被选中
                    oAll.checked=true;
                }
                else{
                    //反之不被选中
                    oAll.checked=false;
                }
            }
        }
    }
</script>
</body>
</html>