JQuery How can I make this code use .children()?

ok. As you can see. I have some inefficient code.

The point of it is to check the children of a parent element.

I couldn't figure out how to use .children(), so I wrote some longhanded code keying on 2 fields (the ID and class). I'd rather just use the class but I couldn't figure out how to use just the "Level" class by itself.

But I don't want to depend on the ID, just the class. (plus I'd rather use .children() if anyone know how)

extra points for making the JQuery shorter, as I don't think I need the IF s开发者_开发百科tatements either.

    <div class="jobtypeHeadLghtRed inputFields" id="jobTypeName">                      
        <input type="checkbox" class="checkbox Level1" checked="'checked'" id="IsSelected_J_L1">    
        <div class="sectionHeaderText" id="JobType">level 1 item</div>
    </div>

    <div class="facilityHeadLghtBlue inputFields" id="jobTypeName">                      
        <input type="checkbox" class="checkbox Level2" checked="'checked'" id="IsSelected_J_L2">      
        <div class="sectionHeaderText" id="JobType">level 2 item</div>                     
    </div>

    <div class="HeadLghtGreen inputFields" id="jobTypeName">                      
        <input type="checkbox" class="checkbox Level3" checked="'checked'" id="IsSelected_J_L3">      
        <div class="sectionHeaderText" id="JobType">Level 3 item</div>                     
    </div>

$(function() {
    $(":checkbox").change(function() {

        var id = this.id;
        var level = id.substring(id.length - 1);

        if(level == 1){
            $('[class*="Level2"], [class*="Level3"]').attr('checked', this.checked); 
        }

        if(level == 2){
            $('[class*="Level3"]').attr('checked', this.checked); 
        }
  });
});

This will work

$(function() {
    $(":checkbox").change(function() {
        $(':checkbox:gt(' + ($(this).attr("class").split("Level")[1]-1)+ ')').attr('checked', this.checked);
        });
});

And here's the fiddle http://jsfiddle.net/aU9AL/

And forget about .children(). This is not the case.

You could put the level number in the rel attribute and use that to key off of.

<div class="jobtypeHeadLghtRed inputFields" id="jobTypeName">                      
    <input type="checkbox" class="checkbox level" rel="1" checked="checked" id="IsSelected_J_L1">    
    <div class="sectionHeaderText" id="JobType">level 1 item</div>
</div>

<div class="facilityHeadLghtBlue inputFields" id="jobTypeName">                      
    <input type="checkbox" class="checkbox level" rel="2" checked="checked" id="IsSelected_J_L2">      
    <div class="sectionHeaderText" id="JobType">level 2 item</div>                     
</div>

<div class="HeadLghtGreen inputFields" id="jobTypeName">                      
    <input type="checkbox" class="checkbox level" rel="3" checked="checked" id="IsSelected_J_L3">      
    <div class="sectionHeaderText" id="JobType">Level 3 item</div>                     
</div>

$(function() {
    $(":checkbox").change(function() {
        $('input.level').attr('checked',false);
        var $rel = $(this).attr('rel');
        for (var i = 1; i <= $rel; i++) {
            $('input.level[rel="'+i+'"]').attr('checked',true);
        }
  });
});

http://jsfiddle.net/QS6fH/

Children would work, but it's easier when you see your code as recursive. In other words, when a checkbox is changed, change the checkbox right below it to match: http://jsfiddle.net/rkw79/tWvG3/

$('div').delegate('input:checkbox', 'change', fncChkChanged);

function fncChkChanged(e) {
    var chked = $(this).attr('checked') ? 'checked' : null;
    var chkNext = $(this).parent().next().find('input:checkbox:first');
    chkNext.attr('checked', chked);
    chkNext.change();
}