如何用JavaScript验证多个复选框？选中触发提示无预期输出如何排查？

问题根因 #

• 条件判断顺序错误：复合判断「两个复选框同时选中」的逻辑放在了「第一个复选框选中」的分支之后，只要第一个复选框处于选中状态，第一个if分支就会直接命中，后续的else if永远不会被执行，更严格的多条件判断需要前置。
• JS逻辑缺少函数包裹：HTML中绑定的点击事件触发productFilter()方法，现有JS代码没有包裹在该函数内，点击复选框时不会执行对应的判断逻辑。

修正后代码 #

JS 部分 #

function productFilter() {
  let ReviewCheckBox = checkform.ratings;
  // 更严格的复合判断放在最前面
  if (ReviewCheckBox[0].checked && ReviewCheckBox[1].checked) {
    alert("Both Selected");
  } else if (ReviewCheckBox[0].checked) {
    alert("1 Selected");
  }
}

注：判断布尔值是否为真时不需要写== true，直接读取布尔属性本身即可，代码更简洁。

HTML 部分和原有代码一致，无需修改： #

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

内容的提问来源于stack exchange，提问作者Gopichand