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个名为“不正确”的复选框，当选中任何一个复选框时，即使选中了三个“正确”复选框，我也不希望生成警报。

<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

你可以保持相同的逻辑

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 2

你需要检查input.checked和input.getAttribute（“name”）在箭头函数中是否具有正确的值

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

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

3 个答案: