jQuery evaluate if checkbox is checked and contains the class true [duplicate]

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
– King King, Commented May 30, 2014 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
– Dondada, Commented May 30, 2014 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
– Dondada, Commented May 30, 2014 at 18:41

T J · Accepted Answer · 2014-05-30 19:41:55Z

$('.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

Dosen't work. When I debug correctAnswers is undefined and the reason is the next('ul li') part.
I get a blank array once I type $(this).next('ul'); in console
@Dondada it's a typo.. class name should be 'True' instead of 'true' i never usually use class names starting with caps... :)
That was one issue. But still $(this).next('ul') comes back an empty array.

Scott Selby · Accepted Answer · 2014-05-30 19:18:53Z

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' }); } }); });

Should I put this in a function and call it on the button click?
@Dondada - please see edit of adding .parent() , I just realized that my other code may not of actually changed the colors properly

fostermm · Accepted Answer · 2014-05-30 20:09:29Z

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.

Collectives™ on Stack Overflow

jQuery evaluate if checkbox is checked and contains the class true [duplicate]

3 Answers 3

7 Comments

4 Comments

1 Comment

Linked

Hot Network Questions