使用JQuery檢查所有直接子復選框上的單擊父復選框

Question

我的html代碼中有一個列表，其中單擊父復選框，應檢查直接子復選框。

<ul class="test_ex">
    <li>
        <input type="checkbox" id="chckBox" class="parent" onchange="fnTest(this);" /> <a class="ref">Fruits</a>
        <ul class="example">
            <li>
                <input type="checkbox" id="chckBox" class="child" /> <a class="ref"> Apple </a>
            </li>
            <li>
                <input type="checkbox" id="chckBox" class="child" /> <a class="ref"> Orange </a>
            </li>
        </ul>
        <ul class="test_ex_sample">
            <li>
                <input type="checkbox" id="chckBox" class="parent" onchange="fnTest(this);" /> <a class="ref">Birds</a>
                <ul class="example">
                    <li>
                        <input type="checkbox" id="chckBox" class="child" /> <a class="ref"> Peacock </a>
                    </li>
                    <li>
                        <input type="checkbox" id="chckBox" class="child" /> <a class="ref">Parrot </a>
                    </li>
                </ul>
                <ul class="example">
                    <li>
                        <input type="checkbox" id="chckBox" class="parent" onchange="fnTest(this);" /> <a class="ref"> Food </a>
                        <ul class="example">
                            <li>
                                <input type="checkbox" id="chckBox" class="child" /> <a class="ref">Bread </a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

我嘗試了很多方法來檢查直接的孩子。 但它們都沒有奏效。 這幾種方式：

• 嘗試使用.siblings（）[僅在stackoverflow上找到此解決方案]

   function fnTest(check) { if ($(check).is(':checked')) { $(check).siblings('.example').find('.child').attr("checked", true); } else { $(check).siblings('.example').find('.child').attr("checked", false); } } 

小提琴演示1

這里第一個列表正常工作。 再次單擊第二個列表時，它也檢查第三個列表子項。

• 其次嘗試了這組代碼嘗試使用被檢查的類以及從該類中獲取子類。 這將檢查屬於該類的所有父項。

小提琴演示2

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

如果有人可以指出我的錯誤，那就太好了。

Answer 1

你可以使用jQuery來做到這一點。 首先刪除onchange="fnTest(this);" 從父復選框。 為父級復選框綁定更改事件，如下所示：

$(function(){
   $('.parent').click(function(){
      $(this).parent().find('.example:first .child').prop('checked',$(this).is(':checked'));
   });
 });

演示

Answer 2

嘗試

 function fnTest(check) {
      $(check).closest("ul").find(":checkbox").prop("checked",check.checked);

}

DEMO

如果你只想讓直接的孩子這樣使用

function fnTest(check) {
    $(check).closest("li").find(".example:first").find(":checkbox").prop("checked", check.checked);

}

DEMO

注意：在jquery中使用最新版本，id也應該是唯一的

Answer 3

從你第一次嘗試使用兄弟姐妹（）。 您可以更改為以下內容：

function fnTest(check){

    if($(check).is(':checked')){
        $(check).siblings('.example:first').find('.child').prop("checked",true);
    }
    else{
        $(check).siblings('.example:first').find('.child').prop("checked",false);        
    }
      }

通過使用它，它只檢查第一個孩子。 並將.attr更改為.prop

這是一個演示： 小提琴

Answer 4

//好測試了

$(document).ready(function(e) {

$('input[type=checkbox]').click(function () {
    $(this).parent().find('li input[type=checkbox]').prop('checked', $(this).is(':checked'));
    var sibs = false;
    $(this).closest('ul').children('li').each(function () {
        if($('input[type=checkbox]', this).is(':checked')) sibs=true;
    })
    $(this).parents('ul').prev().prop('checked', sibs);
});});