全选

最新推荐文章于 2024-07-30 10:07:20 发布

蕊蕊酱_Krystal

最新推荐文章于 2024-07-30 10:07:20 发布

阅读量193

点赞数

本文链接：https://blog.csdn.net/Krystal_rui/article/details/80915487

版权

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>

   <style>
   *{
      margin: 0;
      padding:0;
      list-style: none;
   }

   ul{
      margin: 20px;
   }

   li{
      margin: 10px;
   }

   </style>
</head>
<body>
   <ul>
      <li>
      <label><input type="checkbox">全选</input></label>
       </li>
      <li>
      <label><input type="checkbox">1</input></label>
      </li>
      <li>
      <label><input type="checkbox">2</input></label>
      </li>
      <li>
      <label><input type="checkbox">3</input></label>
      </li>
      <li>
      <label><input type="checkbox">4</input></label>
      </li>
   </ul>

   <script>
      
      window.οnlοad=function(){

         var ArrIp=document.getElementsByTagName("input");
         

         ArrIp[0].onclick=function(){
            for (var i = 0; i < ArrIp.length; i++) {
               ArrIp[i].checked=ArrIp[0].checked;
            }
         }

         for (var a = 1; a < ArrIp.length; a++){
                ArrIp[a].onclick=function(){
                var    num=0;

                for (var z = 1; z < ArrIp.length; z++) {
                   if (ArrIp[z].checked==true) {
                      num=num+1;
               }
                }

            if (num==4) {
                   ArrIp[0].checked=true;
                } 
                else {
                   ArrIp[0].checked=false;
                }
         }
      }
   }

   </script>
</body>
</html>