全选反选全不选

最新推荐文章于 2020-02-24 18:37:44 发布

弱鸡灬

最新推荐文章于 2020-02-24 18:37:44 发布

阅读量97

点赞数

本文链接：https://blog.csdn.net/u013557783/article/details/104298130

版权

 <div style="width:200px;margin: 100px auto;" id="checkBox">
    <input type="checkbox">大哥
    <input type="checkbox">二哥
    <input type="checkbox">三哥
    <input type="checkbox">四哥
    <input type="checkbox">五哥

    <div style="padding-top:30px;">
      <button class="" onclick="clickAll()">全选</button>
      <button class="" onclick="clickNot()">全不选</button>
      <button class="" onclick="clickReversal()">反选</button>
    </div>
  </div>

 var checkList = document.querySelectorAll("#checkBox > input");
    //全选
    function clickAll() {
      for (var i = 0; i < checkList.length; i++) {
        checkList[i].checked = true
      };
    }
    //全不选
    function clickNot() {
      for (var i = 0; i < checkList.length; i++) {
        checkList[i].checked = false
      };
    }
    //反选
    function clickReversal() {
      for (var i = 0; i < checkList.length; i++) {
        if (checkList[i].checked) {
          checkList[i].checked = false
        } else {
          checkList[i].checked = true
        };
      };
    }