js实现全选和反选_全选和反选js-CSDN博客

本文链接：https://blog.csdn.net/wangyayun666/article/details/125120970

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <input type="checkbox" name="game" id="all">全选/反选
  <input type="checkbox" name="game" id="csgo" class="item">csgo
  <input type="checkbox" name="game" id="dota" class="item">dota
  <input type="checkbox" name="game" id="lol" class="item">lol

  <script>
    // 获取全选反选元素
    var all = document.querySelector('#all')
    // 获取所有单独项元素
    var item = document.querySelectorAll('.item')
    // 给全选反选绑定点击事件
    all.onclick = function () {
      // 遍历所有单独项，全选反选被点击后把值赋值给所有单独项实现全选反选
      for(var i = 0; i < item.length; i++) {
        item[i].checked = all.checked
      }
    }

    // 遍历每一个单独项，为每个单独项绑定点击事件
    for(var i = 0; i < item.length; i++) {
      item[i].onclick = function () {
        // 设置统计变量
        var count = 0
        // 遍历每一个单独项，如果有其中一个被选中，统计变量加1
        for(var j = 0; j < item.length; j++) {
          if (item[j].checked) {
            count++
          }
        }
        // 根据选中数量决定是否全选
        if (count === item.length) {
          all.checked = true
        }else {
          all.checked = false
        }
      }
    }
  </script>
</body>
</html>