In jQuery How do turn a subset of checkboxes on and off based on another checkbox

Question

I have a list of divisions and subdivisions that I show with checkboxes, dynamically created through a database with the end result somewhat like this:

<input name="divisions[]" type="checkbox" value "division1"/> Division One
    <input name="departments[]" type="checkbox" value "department1"/> Department One
    <input name="departments[]" type="checkbox" value "department2"/> Department Two

<input name="divisions[]" type="checkbox" value "division2"/> Division Two
    <input name="departments[]" type="checkbox" value "department3"/> Department Three
    <input name="departments[]" type="checkbox" value "department4"/> Department Four

I need to write the jQuery code such when the user clicks on the a division all of its departments and only its departments are equally clicked on or off.

I was thinking of attaching a clicked event function to all divisions that turned on or off all the immediate departments, though I don't know the syntax: conceptually I was thinking:

jQuery(document).ready(function() {
    $(all_elements_with_the_name_divisions).click(function() {
        $(all_immediately_following_elements_with_the_name_departments).attr('checked',this.checked);
    });
})

thanks

Answer 1

Something like this should do the trick.

<input type="checkbox" class="divisions" value="division1" />
<input type="checkbox" class="division1_departments" value="division1_departmen1" />
<input type="checkbox" class="division1_departments" value="division1_departmen2" />
<input type="checkbox" class="divisions" value="division2" />
<input type="checkbox" class="division2_departments" value="division2_departmen1" />
<input type="checkbox" class="division2_departments" value="division2_departmen2" />
<script type="text/javascript">
    $(document).ready(function () {
        $("input.divisions:checkbox").click(function () {
            $("input." + $(this).val() + "_departments:checkbox").attr("checked", $(this).is(':checked'));
        });
    });
</script>

Answer 2

If you surround each group in a <div> you can use the siblings()

<div>
  <input name="divisions[]" type="checkbox" value "division1"/> Division One
  <input name="departments[]" type="checkbox" value "department1"/> Department One
  <input name="departments[]" type="checkbox" value "department2"/> Department Two
</div>
<div>
  <input name="divisions[]" type="checkbox" value "division2"/> Division Two
  <input name="departments[]" type="checkbox" value "department3"/> Department Three
  <input name="departments[]" type="checkbox" value "department4"/> Department Four
</div>


jQuery(document).ready(function() {
    $('input[name="divisions\\[\\]"]').click(function() {
        $(this).siblings('input[type="checkbox"]').attr('checked',this.checked);
    });
})

Answer 3

If you were able to structure your markup like this:

<div class="division">
    <input name="divisions[]" type="checkbox" value "division1"/> Division One
        <div class="department">
        <input name="departments[]" type="checkbox" value "department1"/> Department One
        <input name="departments[]" type="checkbox" value "department2"/> Department Two
        </div>
</div>

The following code should do what you want:

$('.division input[name="divisions\\[\\]"]').click(function() { 
    $(this).find('.department input[type="checkbox"]').attr('checked', this.checked);
});