JQueryこのコードで.children（）を使用するにはどうすればよいですか？

Question

ok。ご覧のように。私は非効率なコードをいくつか持っています。

親要素の子をチェックするのがポイントです。

.children（）を使用する方法を理解できなかったので、2つのフィールド（IDとクラス）に長さのあるコードキーイングを書きました。私はむしろクラスを使用したいと思いますが、 "Level"クラスを単独で使用する方法を理解できませんでした。

しかし、私はIDだけではなく、クラスに依存したくありません。 （プラス私はむしろ誰かが知っているならば.children（）を使用したい）

私はIFステートメントが必要ないと思うので、JQueryを短くするための余分なポイント。

<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); 
     } 
    }); 
}); 

Answer 1

）これは

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

に動作しますそして、ここでフィドルはhttp://jsfiddle.net/aU9AL/

だし、（.childrenを忘れます。これはそうではありません。

Answer 2

あなたはrel属性にレベル番号を入れてのOFFキーすることを使用することができます。

<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/

Answer 3

子供たちはうまくいくが、コードを再帰的に見た方が簡単だ。言い換えれば、チェックボックスが変更されたとき、それが一致するように、右下のチェックボックスを変更：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(); 
}