html5 - jquery checkbox (check / uncheck if others checked) -

hoping can one.

i've got extensive list of checkboxes page need make bit more intelligent (auto).

all checkboxes on page share same 'name' attribute, have sub-groupings.

i'm looking extend this, when checkbox 'checked' within group, 'parent' checked, , if none of grouped (within <ul></ul>) parent unchecked.

i've setup jsfiddle here: http://jsfiddle.net/swdmedia/xsdgm/13/

jquery

$('input.checkbox').click(function() {   var parent = $(this).attr('data-parent');    $('#'+parent).attr('checked', true); }); 

html

<h4>agriculture <input type="checkbox" id="cat4" name="cntnt01cd_categories[]" value="4" /></h4>  <ul>   <li>     <label for="cat44" class="checkbox">     <input type="checkbox" class="checkbox" id="cat44" name="cntnt01cd_categories[]" value="44" data-parent="cat4" />farm services</label> </li>   <li>     <label for="cat40" class="checkbox">     <input type="checkbox" class="checkbox" id="cat40" name="cntnt01cd_categories[]" value="40" data-parent="cat4" />farming</label> </li> </ul>  <h4>automotive sales , supplies <input type="checkbox" id="cat5" name="cntnt01cd_categories[]" value="5" /></h4>   <ul>    <li><label for="cat46" class="checkbox"><input type="checkbox" id="cat46" name="cntnt01cd_categories[]" value="46"/> auto service or auto repair</label></li>    <li><label for="cat48" class="checkbox"><input type="checkbox" id="cat48" name="cntnt01cd_categories[]" value="48"/> auto glass</label></li>                                           </ul> 

use prop() instead of attr() , data() html5 data attribite

 $('input.checkbox').click(function() {    var parent = $(this).data('parent');     $('#'+parent).prop('checked', true); }); 

updated (i guess needing too)

updated version : if of checkbox inside group checked parent checked else unchecked.

$('input.checkbox').click(function() {    var parent = $(this).data('parent');    var checked =false;    $(this).parents('ul').find(':checkbox').each(function(){      if(this.checked){         checked = true;         return;      }   });  $('#'+parent).prop('checked', checked); }); 

i figured out second group in fiddle not working since haven't stated input class , data attribute group . , yes can select input checkbox $(':checkbox') rather giving class input checkbox element , calling class selector(less code) .

fiddle