欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JavaScript实现全选反选

程序员文章站 2023-11-23 08:21:58
html代码

html代码

<label for="all">全选</label><input type="checkbox" id="all">  
<p id="box">  
    <input type="checkbox">  
    <input type="checkbox">  
    <input type="checkbox">  
    <input type="checkbox">  
    <input type="checkbox">  
    <input type="checkbox">  
</p>  

js代码

var all = document.getelementbyid("all");  
   var ainput = document.queryselectorall("#box>input");  
   all.onclick = function () {  
       if (this.checked) {  
           for (var i = 0; i < ainput.length; i++) {  
               ainput[i].checked = true;  
           }  
       } else {  
           for (var i = 0; i < ainput.length; i++) {  
               ainput[i].checked = false;  
           }  
       }  
   };  
  
   for (var i = 0; i < ainput.length; i++) {  
       ainput[i].onclick = function () {  
           var bstop = true;  
           for (var k = 0; k < ainput.length; k++) {  
               if (!ainput[k].checked) {  
                   bstop = false;  
                   break;  
               }  
           }  
  
           if (bstop) {  
               all.checked = true;  
           } else {  
               all.checked = false;  
           }  
       }  
   }