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
      })
    })