做个最简单的全选反选小案例

作者: 深漂浪子 | 来源:发表于2019-06-03 15:53 被阅读0次

做个最简单的全选反选小案例
全选、不选和反选
JQuery CheckBox
全选,全不选,反选
JavaScript基础案例全选、反选
全选反选案例
Vue 移动端购物车页全选反选简单实现及判断
全选反选
表格中的全选、全不选、反勾
【基础】jquery全选、反选、全不选代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
 </head>
<body>
    全选：<input type="checkbox" id="b1"/>
    <br/>
    <input type="checkbox" class="b2"/>
    <input type="checkbox" class="b2"/>
    <input type="checkbox" class="b2"/>
 <script>
   var all=document.getElementById("b1");
   var items=document.querySelectorAll(".b2");
   //全选按钮点击检验
   all.onclick=function(){
        if(this.checked){
          for(var i=0;i<items.length;i++){
                items[i].checked=true;
          }
        }else{
            for(var i=0;i<items.length;i++){
                items[i].checked=false;
          }
        }
   }

   //对单个按钮判断，若有一个按钮未选择则全选按钮就不勾选
   for(var i=0;i<items.length;i++){
        items[i].onclick=function(){
          var flag=false;//默认不勾选
            for(var j=0;j<items.length;j++){
                if(!items[j].checked){
                 flag=false;
                 break; 
                }else{
                 flag=true;
               }
            }

          if(flag){
                all.checked=true;
             }else{
                all.checked=false;
             }
        }

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