jquery - 复选框错误的项目选择了html

Question

我有一个带有多个选项的 html 复选框。

我正在使用 JQuery 更改与用户选择的内容交互的“显示答案”部分。

<script type="text/javascript">
$(function() {

  $('input[type="checkbox"].Q1').click(function() {
    checkQ1();
  });

  function checkQ1() {

    var MCQ10_checked = $('input[value="AQN10"]').prop('checked');
    var MCQ11_checked = $('input[value="AQN12"]').prop('checked');

    if (MCQ10_checked && MCQ11_checked) {
      $("#CA1").html("This is right");
      return;
    }

    if (MCQ10_checked || MCQ11_checked) {
      $("#CA1").html("This is a little right");
      return;
    }

    $("#CA1").html("This is wrong");

  }
});
</script>

目前，如果用户选择了一个不正确的选项以及两个正确的选项，它仍然说它是正确的。

我希望它默认为“它有点正确”选项，因为他们也选择了不正确的选项。

对此的任何建议将不胜感激

标签： jquery

Answer 1

计算所有选中的复选框。如果不是 2，那么他们一定选中了他们选中的正确框旁边的其他框。

$(function() {

  $('input[type="checkbox"].Q1').click(function() {
    checkQ1();
  });

  function checkQ1() {
    var checked_count = $(":checkbox.Q1:checked").length;
    var MCQ10_checked = $('input[value="AQN10"]').prop('checked');
    var MCQ11_checked = $('input[value="AQN12"]').prop('checked');

    if (MCQ10_checked && MCQ11_checked && checked_count == 2) {
      $("#CA1").html("This is right");
      return;
    }

    if (MCQ10_checked || MCQ11_checked) {
      $("#CA1").html("This is a little right");
      return;
    }

    $("#CA1").html("This is wrong");

  }
});