How to use jquery to validate whether at least one tick box from #age-groups, #subjects and #topics have been selected

Question

In my upload form I have a few select boxes. These are arranged in divs called #age-groups, #subjects and #topics.

I want to be able to use jquery to make sure the user clicks at least one checkbox from each of the 3 individual divs.

Please could someone help me figure out how to do this.

For when at least one checkbox in each div is clicked I want the function to output:

   if (at least 1 checkbox is ticked in each of the 3 divs)
   {
     $('#two')
         .append('<div class="done rotatetwo wiggler"></div>')
         .addClass('grey')
   }

If possible can this function output the above code as soon as the final required select box is selected.

score 0 · Answer 1 · edited May 23 '17 at 11:49

You need to check the parents of check box/select box for determination.

Have a look at this

basically,

HTML

<fieldset id="age-groups">
  <input type="checkbox" name="chk[]" value="Apples" />
  <input type="checkbox" name="chk[]" value="Bananas" />
</fieldset>

JavaScript/Jquery

 var atLeastOneIsChecked_ageGroups = $('#age-groups :checkbox:checked').length > 0;

will work for you

score 0 · Answer 2 · answered Apr 04 '12 at 11:48

You'll need to use three selectors to identify any checked checkboxes inside of your three DIVs, then examine the length property of the resulting jQuery objects to make sure that they're greater than zero.

if($('#age-groups input:checkbox:checked').length && ... ) {
    // do your stuff here
}

I've only included the selector for the #age-groups div, but you should be able to modify that to select for the other two.

score 0 · Accepted Answer · answered Apr 04 '12 at 11:49

0

$(":checkbox").click(function(){
    if (($("#age-groups input:checked").length>0) && ($("#subjects input:checked").length>0) && ($("#topics input:checked").length>0){
        $('#two').append('<div class="done rotatetwo wiggler"></div>').addClass('grey');
    }
});

answered Apr 04 '12 at 11:49

ilyes kooli

11,959
14
50
79

This was the most straightforward method and it worked for me. Thank you very much. – MÖRK Apr 04 '12 at 13:49

ZorleQ · Answer 4 · 2012-04-04T11:55:16.967

0

-- misread the question. This would help you if you wanted to check if at least one box is selected across all relevant divs.

try something like this:

if($("#age-groups input[name^='foo']:checked:enabled, #subjects input[name^='foo']:checked:enabled, #topics input[name^='foo']:checked:enabled").length > 0)
// at least one selected
else
// none selected

Of course, this can be simplified if you add a class to all check boxes instead of using the parent div to group them.

if( $("input[name^='foo'].test:checked:enabled").length > 0)
// something selected

Hope this helps!

edited Apr 04 '12 at 11:55

answered Apr 04 '12 at 11:49

ZorleQ

1,417
13
23

They asked for at least one checkbox selected in **each** div, not at least one checkbox selected between the three divs. – Anthony Grist Apr 04 '12 at 11:51
Fair. But, the same principle applies. – ZorleQ Apr 04 '12 at 11:53

How to use jquery to validate whether at least one tick box from #age-groups, #subjects and #topics have been selected

4 Answers4