全选不全选

  <!-- 
        所有选项都选中，全选也选中；
        只要有一个没选中，全选就不选中；
        点击全选，所有选项选中；
        取消全选，所有选项不选中；
     -->

  <input type="checkbox" id="all">全选 <br>
  <input type="checkbox" class="item">选项1<br>
  <input type="checkbox" class="item">选项2<br>
  <input type="checkbox" class="item">选项3<br>
  <input type="checkbox" class="item">选项4<br>

  <script>

    var all = document.getElementById('all');
    var items = document.getElementsByClassName('item');

    // 全选框和选项保持一致
    all.onclick = function () {
      console.log(all.checked);

      for (let i = 0; i < items.length; i++) {
        items[i].checked = all.checked;

      }
    }

    // 给一个选项添加点击事件
    for (let i = 0; i < items.length; i++) {

      items[i].onclick = itemClick;
    }


    function itemClick() {
      // 初始化count的值
      var count = 0;
      // 计算count的值
      for (let i = 0; i < items.length; i++) {
        if (items[i].checked) {
          count++;
        }

        // 选项全选时让全选框选中
        if (count == items.length) {
          all.checked = true;
        } else {
          all.checked = false;
        }
      }
    }

  </script>