Флажок выбран неправильный элемент 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>

В настоящее время, если пользователь выбирает неправильную опцию, а также обе правильные опции, он по-прежнему говорит, что это правильно.

Я бы хотел, чтобы по умолчанию вместо этого было выбрано "Это немного верно", потому что они также выбрали неверную опцию.

Буду признателен за любые советы по этому вопросу

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");

  }
});