在單擊復選框時選中列表下方的復選框

Question

我有一個html代碼，其中應選中父復選框的onclick所有其各自的子復選框。 它以列表的形式。 一切正常，但單擊了父復選框，還選中了其后的所有子復選框。

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

更新了小提琴演示

這是我的小提琴，當我單擊“ 1 princi”復選框時，將同時檢查其下的孩子以及第二個“ 1 princi”的孩子。 我只希望選中各個孩子的復選框。 如何解決這個問題？

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