JQuery Как я могу использовать этот код .children()?

Question

ok. Как вы видете. У меня есть неэффективный код.

Целью этого является проверка дочерних элементов родительского элемента.

Я не мог понять, как использовать .children(), поэтому я написал несколько кодов с длинными ключами на 2 поля (идентификатор и класс). Я бы предпочел просто использовать класс, но я не мог понять, как использовать класс «Level» сам по себе.

Но я не хочу зависеть от идентификатора, только класса. (плюс я предпочел бы использовать .children(), если кто-нибудь знает, как)

дополнительные очки для создания JQuery короче, так как я не думаю, что мне нужны инструкции IF.

<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 и использовать, чтобы ключ прочь.

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