use prop()
instead of attr()
and data()
to get the HTML5 data attribite
$('input.checkbox').click(function() {
var parent = $(this).data('parent');
$('#'+parent).prop('checked', true);
});
updated (I guess you will be needing this too)
updated version : if any of the checkbox inside a group is checked parent is 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 your second group in the fiddle is not working since you haven't stated the input class and data attribute for this group . and yes you can select all input checkbox with $(':checkbox')
rather than giving class to all the input checkbox element and calling class selector(less code) .