Checking every checkbox in a div
Hello all,
I am pretty new to jQuery and am having trouble with something. The page I am working on will have a series of checkboxes. The boxes will be in the format of "parent" with one checkbox and then a "child" div with multiple checkboxes. The idea is being able to check a parent checkbox and have all the checkboxes in the preceding child div get checked as well. Here is the layout:
<div class = "parent_div">
<label>parent</label><input type = 'checkbox' / >
</div>
<div class = "child_div">
<label>child</label><input type = 'checkbox' / >
<label>child</label><input type = 'checkbox' / >
<label>child</label><input type = 'checkbox' / >
</div>
he code to handle the checks is here :
$(".parent_div INPUT[type='checkbox']").change(function(){
var child = $(this).parent().next(".child_div");
$
(child).children().attr('checked',true);
});
This does not work. The checkboxes do not get checked. I know that the selector is working because if I assign a function to them like this:
$(".parent_div INPUT[type='checkbox']").change(function(){
var child = $(this).parent().next(".child_div");
$
(child).children().change(function(){
alert
("changed");
});
});
It will work, the function get"s assigned to each checkbox in the div. Could anyone tell me why my boxes are not getting checked?
Oh and on a side note I found this curious, if I try to access the checkboxes by specifying a selector type in the children method like this :
$(child).children("INPUT[type='checkbox']")
or
$(child).children("input")
it doesn't select the boxes. Could anyone tell me why that is? Oh and in case anyone mentions it I know that the child divs are not actually children of the parent divs, all these values are coming from a database and the names were chosen based on the database relationships. Any help with this anyone could give me would be very much appreciated, thanks much!