如果某些复选框被“选中”，则检查所有 javascript答案

【问题标题】：if some checkboxes are 'checked' then check all javascript如果某些复选框被“选中”，则检查所有 javascript
【发布时间】：2020-05-15 12:01:22
【问题描述】：

<!--

if all checkboxes are not 'checkecd' then check all
if some are 'checked' then check all
if all are 'checked' then uncheck all
-->

const btn = document.querySelector('button');
        btn.addEventListener('click',()=>{
            const allboxes = document.querySelectorAll('input[type="checkbox"]');
            allboxes.forEach(box => {
                if(!box.checked){
                    box.checked = true;
                } else {
                    box.checked = false;
                }
            })
        })

<button>select all</button>
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">

单击按钮全选后，我的代码无法正常工作。如果所有复选框都不是'checkecd'然后检查所有如果有些被“检查”然后检查所有如果所有都被“选中”，则取消选中所有

【问题讨论】：

这两个意思相同if all checkboxes are not 'checkecd' then check all if some are 'checked' then check all
点击“全选”按钮时，如果所有复选框都“未选中”，则检查所有复选框是否已选中，有些未选中，然后检查所有复选框是否已选中，然后取消选中所有复选框跨度>
这能回答你的问题吗？ Check all checkboxes with JavaScript
还有How to check if all checkboxes are unchecked

标签： javascript input checkbox checkboxlist

【解决方案1】：

您可以使用数组some 和every。使用some 检查是否检查了某些元素，使用every 检查是否检查了所有元素。然后相应地选中或取消选中

const btn = document.querySelector('button');
btn.addEventListener('click', () => {
  const allboxes = document.querySelectorAll('input[type="checkbox"]');
  // if some of the checkbox is checked
  const isSomeCheck = [...allboxes].some(item => item.checked);
  // if all are checked
  const isAllChecked = [...allboxes].every(item => item.checked);
  // if some are checked then on click of button check all
  if (isSomeCheck) {
    allboxes.forEach(item => item.checked = true)
  }
  // if all are checked then uncheck all
  if (isAllChecked && isSomeCheck) {
    allboxes.forEach(item => item.checked = false)
  }
})

<button>select all</button>
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">

【讨论】：

所有你需要检查的是是否所有的都被检查了；如果是，则取消选中它们。否则，请全部检查。

【解决方案2】：

旧的 querySelectorAll 与 CSS 伪类 :checked 来救援。您可以通过将 length 比较移动到 forEach 来进一步缩短此时间。

/*
if all checkboxes are not 'checkecd'
then check all
if some are 'checked'
then check all
if all are 'checked'
then uncheck all
*/

const btn = document.querySelector('button');
btn.addEventListener('click', () => {
  const allboxes = document.querySelectorAll('input[type="checkbox"]');
  const checkedBoxes = document.querySelectorAll('input[type="checkbox"]:checked');
  const allChecked = allboxes.length === checkedBoxes.length;
  allboxes.forEach(box => box.checked = !allChecked);
})

<button>select all</button>
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">

【讨论】：

【解决方案3】：

您可以使用Array.prototype.every() 和Array.prototype.some()。比如这样：

if (Array.prototype.every.call(allboxes, box => !box.checked)) {
    allboxes.forEach(box => box.checked = true);
} else if (Array.prototype.every.call(allboxes, box => box.checked)) {
    allboxes.forEach(box => box.checked = false);
} else if (Array.prototype.some.call(allboxes, box => box.checked)) {
    allboxes.forEach(box => box.checked = true);
}

【讨论】：