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

Question

我在我的网站中实施了以下代码，以便在选中三个名为 "correct" 的复选框时发出警报。

<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个名为"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"/>
<input type="checkbox" name="incorrect"/>

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

Answer 1

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

Answer 2

你可以保持相同的逻辑

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

Answer 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');
  }
};

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

How to display an alert when only three of nine checkboxes are checked?

html

javascript

checkbox

addeventlistener

selectors-api