如果一些复选框是 'checked' 然后检查所有 javascript

Question

<!--

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">

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

Answer 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">

Answer 2

您可以使用 Array.prototype.every() and 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);
}

Answer 3

好旧的 querySelectorAll 和 CSS 伪 class :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">

如果一些复选框是 'checked' 然后检查所有 javascript

if some checkboxes are 'checked' then check all javascript

javascript

checkbox

input

checkboxlist