全选，全不选，反选效果

最新推荐文章于 2021-09-20 11:32:18 发布

chujuan7169

最新推荐文章于 2021-09-20 11:32:18 发布

阅读量96

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/CodingPeasant/blog/681518

版权

<!doctype html>
<html lang="en">
<head>
   <meta charset="UTF-8" />
   <title>Document</title>
   <style>
       *{margin: 0; padding: 0;}
       ul{margin: 100px auto; width: 200px;}
       li{list-style: none;}
       label{cursor: pointer;}
   </style>
   <script type="text/javascript">
       window.onload = function(){
           var oAll = document.getElementById('all');
           var oDiv = document.getElementById('div1');
           var aInput = oDiv.getElementsByTagName('input');
           var oN = document.getElementById('allNo');
           var oFan = document.getElementById('fan');
           oAll.onclick = function(){

               for (var i = 0; i < aInput.length; i++) {
                   aInput[i].checked = true;
               }
           }

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

           oFan.onclick = function(){
               for (var i = 0; i < aInput.length; i++) {
                   if(aInput[i].checked == true){
                       aInput[i].checked = false;
                   }else{
                       aInput[i].checked = true;
                   }

               }
           }
       }
   </script>
</head>
<body>
   <ul>
           <label id="all" for="">
               <span>全選</span>
           </label><br />

           <label for="" id="allNo">
               <span>全不选</span>
           </label><br />
           <label for="" id="fan">
               <span>反选</span>
           </label>


           <div id="div1">
               <input type="checkbox" /><br />
               <input type="checkbox" /><br />
               <input type="checkbox" /><br />
               <input type="checkbox" /><br />
               <input type="checkbox" />
           </div>
   </ul>
</body>
</html>