DijkeMark DijkeMark - 1 month ago 9
Javascript Question

Can't change css of all checkboxes when clicked on main checkbox


hello Guys,



I am trying to change to background and color of all my checkboxes withing a form with jQuery.
I can't get it to work.


This is what my code looks like now:

The HTML part:


<form action="" method="">
<div id="child1">
<input type="checkbox" class="select-all-checkboxes" name="select-all-checkboxes" />
</div>
<div id="child2">
<input type="checkbox" name="checkboxs[]" />
<input type="checkbox" name="checkboxs[]" />
<input type="checkbox" name="checkboxs[]" />
<input type="checkbox" name="checkboxs[]" />
</div>
</form>


The jQuery part


$('form input.select-all-checkboxes:checkbox').live('click', function()
{
if($(this).attr('checked') == true)
{
$(this).parent('form').children('input:checkbox').css({
background: 'rgba(0, 255, 0, 0.5)',
border: '1px solid green'
});
}
else
{
$(this).parent('form').children('input:checkbox').css({
background: 'none',
border: '1px solid transparent'
});
}
});


What it should do is that when you click on the checkbox with the class 'select-all-checkboxes', then all checkboxes within the form should get checked and get a different border and background.

I just don't get it to work. Hope you guys can help me.

Thanks in Advance,

Mark

Answer

Your selector is wrong. You need to use parents and find. even so, the style rule seems to have no effect on the checkboxes in chrome

$(this).parents('form').find('input:checkbox')