如何验证 JavaScript 中的多个复选框？

Question

我有 4 个复选框，我想在选中前两个复选框时显示不同的警报，但没有收到 output.Please 让我知道哪里出错了。

let ReviewCheckBox = checkform.ratings;
if (ReviewCheckBox[0].checked == true) {
  alert("1 Selected");
} else if (ReviewCheckBox[0].checked == true && ReviewCheckBox[1].checked == true) {
  alert("Both Selected");
}

<div>
  <span>CUSTOMER REVIEWS</span><br>
  <form name="checkform" onclick="productFilter()">
    <input type="checkbox" name="ratings" id="rating-checka">
    <label for="rating-checka">4 * & Above</label><br>

    <input type="checkbox" name="ratings" id="rating-checkb">
    <label for="rating-checkb">3 * & Above</label><br>

    <input type="checkbox" name="ratings" id="rating-checkc">
    <label for="rating-checkc">2 * & Above</label><br>

    <input type="checkbox" name="ratings" id="rating-checkd">
    <label for="rating-checkd">1 * & Above</label>
  </form>
</div>

Answer 1

1) 你必须验证每个选中的复选框，为此你可以创建一个函数 productFilter 并且它会运行每次你选中

2) 您必须首先检查 0 和 1 索引复选框，而不是 only 0.

function productFilter() {
  let ReviewCheckBox = checkform.ratings;
  if (ReviewCheckBox[0].checked == true && ReviewCheckBox[1].checked == true) {
    alert("Both Selected");
  } else
  if (ReviewCheckBox[0].checked == true) {
    alert("1 Selected");
  }
}

<div>
  <span>CUSTOMER REVIEWS</span><br>
  <form name="checkform" onclick="productFilter()">
    <input type="checkbox" name="ratings" id="rating-checka">
    <label for="rating-checka">4 * & Above</label><br>

    <input type="checkbox" name="ratings" id="rating-checkb">
    <label for="rating-checkb">3 * & Above</label><br>

    <input type="checkbox" name="ratings" id="rating-checkc">
    <label for="rating-checkc">2 * & Above</label><br>

    <input type="checkbox" name="ratings" id="rating-checkd">
    <label for="rating-checkd">1 * & Above</label>
  </form>
</div>

如何验证 JavaScript 中的多个复选框？

How to validate multiple checkboxes in JavaScript?

javascript

validation

checkbox