仅选中九个复选框中的三个时如何显示警报？答案

【问题标题】：How to display an alert when only three of nine checkboxes are checked?仅选中九个复选框中的三个时如何显示警报？
【发布时间】：2017-04-06 13:16:57
【问题描述】：

我在我的网站中实现了以下代码，以便在选中三个名为“正确”的复选框时发出警报。

<input type="checkbox" name="correct"/>
<input type="checkbox" name="correct"/>
<input type="checkbox" name="correct"/>

const correctInputs = [...document.querySelectorAll('input[name="correct"]')];

const alertIfThree = () => {
  const checkedCorrectInputs = correctInputs.filter(input => input.checked);
  if (checkedCorrectInputs.length > 2) {
    alert('Alert');
  }
};

correctInputs.forEach(input => input.addEventListener('click', alertIfThree));

但是，我还有6个名为“不正确”的复选框，并且当检查任何这些复选框时，我不希望产生警报，即使检查了三个“正确”复选框。

<input type="checkbox" name="incorrect"/>
<input type="checkbox" name="incorrect"/>
<input type="checkbox" name="incorrect"/>
<input type="checkbox" name="incorrect"/>
<input type="checkbox" name="incorrect"/>
<input type="checkbox" name="incorrect"/>

如何更改我的代码来实现这一点？提前致谢！

【问题讨论】：

“如何更改我的代码来实现它？” 将它们视为一个数组。

标签： javascript html checkbox addeventlistener selectors-api

【解决方案1】：

你可以保持相同的逻辑

const correctInputs = [...document.querySelectorAll('input[name="correct"]')];
const incorrectInputs = [...document.querySelectorAll('input[name="incorrect"]')];

const alertIfThree = () => {
    const checkedCorrectInputs = correctInputs.filter(input => input.checked);
    const checkedIncorrectInputs = incorrectInputs.filter(input => input.checked);

    if (incorrectInputs.length === 0 && checkedCorrectInputs.length > 2) {
        alert('Alert');
    }
};

【讨论】：

感谢您的快速回复。但是，我刚刚尝试过，但它不起作用，没有产生任何警报
incorrectInputs.length 和 checkedCorrectInputs.length 的值是多少？
在你定义了checkedCorrectInputs和checkedIncorrectInputs consts之后添加console.log('incorrect lenght is: '+incorrectInputs.length+' and correct length is: '+checkedCorrectInputs.length);，并且让我们知道输出..
@GonrasKarols 我已经添加了代码并尝试首先检查三个“正确”输入，但控制台中没有显示任何内容。我还尝试检查所有复选框，但控制台中仍然没有显示任何内容。你能帮忙吗？

【解决方案2】：

您需要检查 input.checked 和 input.getAttribute("name") 在箭头函数中的值是否正确

【讨论】：

【解决方案3】：

我认为最好的方法是查询不正确的复选框，并在你的 if 语句中添加一个额外的条件..

 const IncorrectInputs = 
 [...document.querySelectorAll('input[name="incorrect"]')]; //check the incorrect values as well..

const alertIfThree = () => {
  const checkedCorrectInputs = correctInputs.filter(input => 
  input.checked);

  const checkedIncorrectInputs = IncorrectInputs.filter(input => 
  input.checked);

  if (checkedCorrectInputs.length > 2 && checkedIncorrectInputs<=0 ) {
    alert('Alert');
  }
};

【讨论】：

感谢您的快速回复。但是，我刚刚尝试过，但它不起作用，没有产生任何警报