DOM-复选框全选

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>复选框的全选和取消全选</title>
        <!--
        checkbox属性checked 返回checkbox 是否被选中
        语法: checkedObject.checked =true false
        -->
    </head>
    <body>
        
        <script type="text/javascript">
           window.onload=function(){
            //所有的复选框
            var aihaos = document.getElementsByName("aihao");
            var firstChk = document.getElementById("firstChk");
              
              firstChk.onclick=function(){ 
                  for(var i = 0;i<aihaos.length;i++){
                      aihaos[i].checked=firstChk.checked;
                  }
              }
              //拿到所有元素
              var all=aihaos.length;
              for(var i = 0;i<aihaos.length;i++){
                //对上面数组遍历,给数组每一个元素加一个单击事件
                  aihaos[i].onclick=function(){
                    var chenckedCount=0;
                    //总量和选中的数量相等时,第一个复选框选中
                    for(var i=0;i<aihaos.length;i++){
                        if(aihaos[i].checked){
                            chenckedCount++;
                        }
                    }
                    firstChk.checked=(all==chenckedCount);
                }
              } 
           }
        </script>
        <input type="checkbox" id="firstChk"/><br>
        <input type="checkbox" name="aihao" value="somke"/>抽烟<br>
        <input type="checkbox" name="aihao" value="drink"/>喝酒<br>
        <input type="checkbox" name="aihao" value="tt"/>烫头<br>
    </body>
</html>

 

posted @ 2022-06-13 14:01  280887072  阅读(35)  评论(0编辑  收藏  举报