JS 复选框 全选 判断复选框是否全选

JS 复选框 全选 判断复选框是否全选

html 代码

  <input type="checkbox" name="all" id="all">全选
  <hr>
  <input type="checkbox" name="check_item">
  <hr>
  <input type="checkbox" name="check_item">
  <hr>
  <input type="checkbox" name="check_item">
  <hr>
  <input type="checkbox" name="check_item">
  <hr>

JS 代码

 	const allCheck = document.querySelector('#all')
    const check_item = document.querySelectorAll("input[name='check_item']")

    // 全选按钮点击事件
    allCheck.addEventListener('click', () => {
      // 如果没选中 则 全部复选框都不选中
      if (!allCheck.checked) return check_item.forEach(v => v.checked = false);
      // 如果选中 则 全部复选框都选中
      check_item.forEach(v => v.checked = true)
    });

    //判断是否全选
    let count = 0;
    check_item.forEach(v => {
      // 为所有按钮添加点击事件
      v.addEventListener('click', _ => {
        // 判断是否选中 
        v.allCheck ? ++count : --count
        // 判断 选中的数量 是否等于 复选框的长度
        if (count == check_item.length) allCheck.checked = true
        else allCheck.checked = false
      })
    })