jQuery evaluate if checkbox is checked and contains the class true

Question

I'm creating a multiple choice assessment using jQuery. Currently the DOM structure is as follows:

<button class="multiplesubmit">Check Answer</button>
<ul class="multiplechoice_answergroup">
<li class="multiplechoice_answer True"><input class="checkbox" type="checkbox" name="checkbox"> Answer 1</li>
<li class="multiplechoice_answer False"><input class="checkbox" type="checkbox" name="checkbox"> Answer 1</li>
<li class="multiplechoice_answer False"><input class="checkbox" type="checkbox" name="checkbox"> Answer 1</li>
<li class="multiplechoice_answer True"><input class="checkbox" type="checkbox" name="checkbox"> Answer 1</li>
</ul>

I need to write a function that when the button is clicked to see if the checkbox is ticked and that the class name of the li contains 'True'.

So far this is my jQuery:

      $('.multiplechoice_answer .Paragraph').prepend('<input class="checkbox" type="checkbox" name="checkme" />');
      $('.multiplechoice_wrap').prepend('<button class="submit_button multiplesubmit">Check Answer</button>');


      $('.multiplesubmit').click(function() {
        multipleChoiceCheck();

      });

      var multipleChoiceCheck = function() {
        if($('input:checkbox[name=checkme]').is(':checked') && $('.multiplechoice_answer').hasClass('True')) {
          alert('correct!');
        }

};

`[name=checkme]` this won't never match your checkboxes in your current HTML code, looks like you miss the names for your checkboxes. — King King, May 30 '14 at 18:38
@BoatCode That's no help. I know how to see if a checkbox is ticked. My issue is to give correct feedback only if the checkbox is ticked with it's parent element containing the class "True" — Dondada, May 30 '14 at 18:39
@KingKing The name is being outputted if you look in the jquery. If any checkbox is clicked the alert ends up popping up. — Dondada, May 30 '14 at 18:41

T J · Accepted Answer · 2014-05-30T19:41:55.440

5

$('.multiplesubmit').click(function () {
  var correctAnswers = $(this).next('ul').children('li').filter(function () {
    return $(this).hasClass('True') && $(this).find('input[type="checkbox"]:checked').length>0;
  });
  if(correctAnswers.length>0) {
    alert('found')
  }
});

JSFiddle

Update

As per comments

$('.multiplesubmit').click(function () {
  var correctAnswers = $(this).next('ul').children('li').filter(function () {
    return $(this).hasClass('True') && $(this).find('input[type="checkbox"]:checked').length>0;
  });
  var wrongAnswers = $(this).next('ul').children('li').filter(function () {
    return $(this).hasClass('False') && $(this).find('input[type="checkbox"]:checked').length>0;
  });
  if (correctAnswers.length>0 && wrongAnswers.length<1) {
    alert('found')
  }
});

JSFiddle

edited May 30 '14 at 19:41

answered May 30 '14 at 18:41

T J

42,762
13
83
138

Dosen't work. When I debug correctAnswers is undefined and the reason is the next('ul li') part. – Dondada May 30 '14 at 19:08
I get a blank array once I type $(this).next('ul'); in console – Dondada May 30 '14 at 19:12
@Dondada it's a typo.. class name should be 'True' instead of 'true' i never usually use class names starting with caps... :) – T J May 30 '14 at 19:14
That was one issue. But still $(this).next('ul') comes back an empty array. – Dondada May 30 '14 at 19:19
http://jsfiddle.net/tilwinjoy/tzXgM/ – T J May 30 '14 at 19:20
If you check one false one and one correct one you still get the found alert – Dondada May 30 '14 at 19:29
@Dondada yes, because your question doesn't cover this. read your question again, and update the question properly... – T J May 30 '14 at 19:30

fostermm · Answer 2 · 2014-05-30T20:09:29.490

This will check each checkbox individually, since you could have multiple that are checked and have the True class.

$(document).ready(function() {
  $('.multiplesubmit').click(function() {
    multipleChoiceCheck();
  });
});

function multipleChoiceCheck() {
  $(".multiplechoice_answergroup").find("input[type=checkbox]").each(function() {
    var $this = $(this);
    if($this.prop("checked") && $this.parent().hasClass("True")) {
      alert($this.val());
    }
  });
}

I added values to your checkboxes to differentiate the answers:

<button class="multiplesubmit">Check Answer</button>
<ul class="multiplechoice_answergroup">
    <li class="multiplechoice_answer True"><input class="checkbox" type="checkbox" name="checkbox" value="Answer 1"> Answer 1</li>
    <li class="multiplechoice_answer False"><input class="checkbox" type="checkbox" name="checkbox" value="Answer 2"> Answer 2</li>
    <li class="multiplechoice_answer False"><input class="checkbox" type="checkbox" name="checkbox" value="Answer 3"> Answer 3</li>
    <li class="multiplechoice_answer True"><input class="checkbox" type="checkbox" name="checkbox" value="Answer 4"> Answer 4</li>
</ul>

JS Fiddle Example

My mistake. I just found the issue and edited my answer. I provided a JS Fiddle example too with a working sample. — fostermm, May 30 '14 at 20:10

score 0 · Answer 3 · answered May 30 '14 at 19:18

0

try this:

I change the color of text to red for all incorrect, and green for correct, but I left comments so you can do whatever you like for incorrect and correct answers

$('.multiplesubmit').click(function() {
    $.each('input:checkbox[name=checkme]', function(){
    if( $(this).is(':checked'){
        if( $(this).hasClass('True'){       
           // CHECKED - CORRECT
           $(this).parent().css({ 'color' : 'green' });
         }
         else{
           // CHECKED - INCORRECT
           $(this).parent().css({ 'color' : 'red' });
         }
    }
    else{
      if( $(this).hasClass('True'){       
        // UN-CHECKED - INCORRECT
        $(this).parent().css({ 'color' : 'red' });
      }
        else{
       // UNCHECKED - CORRECT
        $(this).parent().css({ 'color' : 'green' });
      }

    });
});

answered May 30 '14 at 19:18

Scott Selby

9,420
12
57
96

Should I put this in a function and call it on the button click? – Dondada May 30 '14 at 19:20
yes , put in button click ., I will update – Scott Selby May 30 '14 at 19:20
@Dondada - please see edit of adding .parent() , I just realized that my other code may not of actually changed the colors properly – Scott Selby May 30 '14 at 19:23
I get syntax errors. I'll try and fix – Dondada May 30 '14 at 19:27

jQuery evaluate if checkbox is checked and contains the class true

3 Answers3