Question

我有一个html代码，其中onclick of parent复选框应该检查所有相应的子复选框。它以列表的形式出现。一切正常但单击了父复选框，并且还检查了它后面的所有子复选框。

myhtml代码

<ul class="expandable_ex">
    <li>
        <input type="checkbox" id="chck" class="parent" onchange="fncheckbox(this);" />      <a onclick="fnUnit()" class="refclass" > 1 princi</a>
        <ul class="expandable">
            <li>
                <input type="checkbox" id="chck" class="child" /> <a onclick="fnUnit()" class="refclass" > 1 lecture </a>
            </li>
            <li>
                <input type="checkbox" id="chck" class="child" /> <a onclick="fnUnit()"  class="refclass" > 2 lecture </a>
            </li>
        </ul>

        <ul class="expandable_ex">
            <li>
                <input type="checkbox" id="chck" class="parent" onchange="fncheckbox(this);"/> <a onclick="fnUnit()" class="refclass" > 1 princi</a>
                <ul class="expandable">
                    <li>
                        <input type="checkbox" id="chck" class="child" /> <a onclick="fnUnit()" class="refclass" > 1 lecture </a>
                    </li>
                    <li>
                        <input type="checkbox" id="chck" class="child" /> <a onclick="fnUnit()"  class="refclass" > 2 lecture </a>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

我的js代码

function fncheckbox(checkBox){
    if($(checkBox).is(':checked')){
        $(checkBox).closest('li').find('.child').attr("checked",true);
    }
}

Updated Fiddle demo

这是我的小提琴，当我点击＆＃34; 1 princi＆＃34;复选框下面的子项以及第二个＆＃34; 1 princi＆＃34;的子项。也检查。我只想检查各个孩子的复选框。如何解决这个问题？

Answer 1

使用siblings()代替closest()，更新Fiddle

$(checkBox).siblings('.expandable').find('.child').attr("checked",true);

Answer 2

见下面的小提琴：
http://jsfiddle.net/Maryyy/eLE7g/

一种解决方案是将特定类添加到父项和子项，并选择与父项具有相同类的子项。

function fncheckbox(checkBox){  
     if($(checkBox).is(':checked')){  
         var classParent = "." + $(checkBox).attr('class');  
         $(classParent).attr("checked",true);  
     }  
}

单击复选框，选中列表下的复选框

2 个答案: