当前位置： 移动技术网 > IT编程>开发语言>JavaScript > JavaScript实现全选反选

JavaScript实现全选反选

2018年12月10日  | 移动技术网IT编程  | 我要评论

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;  
           }  
       }  
   }

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网