CODEWITHSUNDEEP
jquery
Reis
Reis

Reputation: 7

Checkbox wrong item selected html

I have a html checkbox with multiple options.

I'm using JQuery to change the 'Reveal Answer' section which is interactive to what the user selects. 

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

Currently, if the a user selects an incorrect option as well as both correct options, it still says it's right.

I would like this to default to "It's a little bit right" option instead because they have also selected an incorrect option.

Any advise on this would be appreciated

Upvotes: 0

Views: 209

Answers (1)

Barmar
Barmar

Reputation: 780889

Count all the checkboxes that were checked. If it's not 2, then they must have checked other boxes beside the correct ones that they checked.

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

  }
});

Upvotes: 1

Related Questions