Question

确定。如你看到的。我有一些效率低下的代码。

重点是检查父元素的子元素。

我无法弄清楚如何使用.children（），所以我写了一些关于2个字段（ID和类）的长链代码。我宁愿只使用该类，但我无法弄清楚如何仅使用“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();
}

JQuery如何使用.children（）？

3 个答案: