<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>全选、反选</title>
  </head>
  <body>
    <form>
      <input type="checkbox" name="" id="all" onclick="selectAll();" />全选<br />
      <hr /><br />
      <input class="chk" type="checkbox" name="chk" onclick="selectSingle();" />菜单一<br /><br />
      <input class="chk" type="checkbox" name="chk" onclick="selectSingle();" />菜单二<br /><br />
      <input class="chk" type="checkbox" name="chk" onclick="selectSingle();" />菜单三<br /><br />
      <input class="chk" type="checkbox" name="chk" onclick="selectSingle();" />菜单四<br /><br />
    </form>
    <script type="text/javascript" >
      var dom=document.getElementById('all');
      var doms=document.getElementsByName('chk');
      function selectAll(){
        var len = doms.length;
        for(var i=0;i<len;i++){
          if(dom.checked){
            doms[i].checked=true;
          }else{
            doms[i].checked=false;
          };
        }
      };
      function selectSingle(){
        let len = 0;
        let count = doms.length;
        for(var i=0;i<count;i++){
          if(doms[i].checked==true){
            len++;
          }
        }
        if (count == len) {
          dom.checked = true;
        }else{
          dom.checked = false;
        }
      }
    </script>
  </body>
</html>

　　

微信公众号: 卡二条的技术圈