在单击复选框时选中列表下的复选框答案

【问题标题】：Check the checkboxes under a list onclicking a checkbox在单击复选框时选中列表下的复选框
【发布时间】：2014-08-05 18:25:54
【问题描述】：

我有一个 html 代码，其中父复选框的 onclick 应检查其所有相应的子复选框。它采用列表的形式。一切正常，但父复选框被单击，并且它后面的所有子复选框也被选中。

我的html代码

<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

这是我的小提琴，当我单击“1 princi”复选框时，它下面的子项被选中，第二个“1 princi”的子项也被选中。我只想检查各个孩子的复选框。如何解决这个问题？

【问题讨论】：

如果您选择正确的选项来加载您的 JS，似乎可以正常工作。 jsfiddle.net/j08691/5N6TL/14
抱歉实际的小提琴是这个jsfiddle.net/5N6TL/15
你是说应该只选择直系孩子吗？
是的，只选择直接子代
如果取消选中它会怎样？孩子应该不受约束吗？如果您选中父母然后取消选中孩子怎么办？父母应该不受约束吗？还是不确定？

标签： javascript jquery html checkbox

【解决方案1】：

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

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

【讨论】：

谢谢维迪亚。快乐学习

【解决方案2】：

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

一种解决方案是为父母和孩子添加特定的类，并选择与父母具有相同班级的孩子。

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

【讨论】：

@Mary ：您的小提琴不可用。我请求你再次发布小提琴。
糟糕，它现在可用，我更改了网址，对不起！