使用父ID選中所有子復選框-jQuery

Question

當我單擊parent 1 check all按鈕，應根據父級ID選擇所有子級。 我有更多的父母，每個父母都有自己的ID。 我該怎么做。 我嘗試了一些不起作用的代碼。 有人在這方面幫助我。 謝謝。

 <div> <input type="checkbox" id="choice_5621_1"> Parent 1 check all <br /> <input type="checkbox" id="choice_5621_1_1"> <br /> <input type="checkbox" id="choice_5621_1_2"> <br /> <input type="checkbox" id="choice_5621_1_3"> </div> <br /> <br /> <div> <input type="checkbox" id="choice_5621_2"> Parent 2 check all <br /> <input type="checkbox" id="choice_5621_2_1"> <br /> <input type="checkbox" id="choice_5621_2_2"> <br /> <input type="checkbox" id="choice_5621_2_3"> </div> 

Answer 1

將所有輸入都包裝在div中后，可以使用.nextAll()

 // I gave the parent a checkall class just for demo cos not sure what your initial selector is: $('.checkall').on('change', function() { $(this).nextAll('input').prop('checked', this.checked); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div><input type="checkbox" id="choice_5621_1" class="checkall"> Parent 1 check all <br /> <input type="checkbox" id="choice_5621_1_1"> <br /> <input type="checkbox" id="choice_5621_1_2"> <br /> <input type="checkbox" id="choice_5621_1_3"> </div> 

Answer 2

這是解決方案

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<ul>
    <li>
        <input type="checkbox" name="choice_5621_1"> Parent 1 check all</input>
        <ul>
            <li><input type="checkbox" name="choice_5621_1_1">Child 1</input></li>
            <li><input type="checkbox" name="choice_5621_1_2">Child 1</input></li>
            <li><input type="checkbox" name="choice_5621_1_3">Child 1</input></li>
            <li><input type="checkbox" name="choice_5621_1_4">Child 1</input></li>                    
        </ul>
    </li>
    <li>
        <input type="checkbox" name="choice_5621_2">  Parent 2 check all </input>
        <ul>
            <li><input type="checkbox" name="choice_5621_2_1">Child 2</input></li>
            <li><input type="checkbox" name="choice_5621_2_2">Child 2</input></li>
            <li><input type="checkbox" name="choice_5621_2_3">Child 2</input></li>
            <li><input type="checkbox" name="choice_5621_2_4">Child 2</input></li>                    
        </ul>
    </li>
</ul>

<script>
$(document).ready(function () {
    $('input[name="choice_5621_1"]').bind('click', function () {
        $('input[type=checkbox]', $(this).parent('li')).attr('checked', ($(this).is(':checked')));
    });
    $('input[name="choice_5621_2"]').bind('click', function () {
        $('input[type=checkbox]', $(this).parent('li')).attr('checked', ($(this).is(':checked')));
    });
});
</script>

Answer 3

我猜您需要使用以selector開頭的屬性 ，如下所示：

$('div[id^="choice_5621_2_"]').prop('checked', true);

Answer 4

您可以使用jQuery的siblings選擇器，然后選擇處於同一級別的所有復選框。

 $('.checkall').on('click', function() { $(this).siblings('input').prop('checked', this.checked); }); //Also making sure if any of the level2 checkbox is unchecked, then uncheck the main checkbox too. $('.level2').on('click', function() { $(this).siblings('.checkall').prop('checked', false); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <input type="checkbox" id="choice_5621_1" class="checkall"> Parent 1 check all <br /> <input type="checkbox" id="choice_5621_1_1" class="level2"> <br /> <input type="checkbox" id="choice_5621_1_2" class="level2"> <br /> <input type="checkbox" id="choice_5621_1_3" class="level2"> </div> <br /> <br /> <div> <input type="checkbox" id="choice_5621_2" class="checkall"> Parent 2 check all <br /> <input type="checkbox" id="choice_5621_2_1" class="level2"><br /> <input type="checkbox" id="choice_5621_2_2" class="level2"><br /> <input type="checkbox" id="choice_5621_2_3" class="level2"> </div> 

Answer 5

給定一個表示一組DOM元素的jQuery對象， .closest()方法將在DOM樹中搜索這些元素及其祖先，並從匹配的元素構造一個新的jQuery對象。 .parents()和.closest()方法的相似之處在於它們都遍歷DOM樹

 $("#choice_5621_2 , #choice_5621_1").on("click",function(){ $(this).closest("div" ).find("input[type='checkbox']").not($(this)).prop("checked",$(this).is(":checked")); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <input type="checkbox" id="choice_5621_1"> Parent 1 check all <br /> <input type="checkbox" id="choice_5621_1_1"> <br /> <input type="checkbox" id="choice_5621_1_2"> <br /> <input type="checkbox" id="choice_5621_1_3"> </div> <br /> <br /> <div> <input type="checkbox" id="choice_5621_2"> Parent 2 check all <br /> <input type="checkbox" id="choice_5621_2_1"> <br /> <input type="checkbox" id="choice_5621_2_2"> <br /> <input type="checkbox" id="choice_5621_2_3"> </div> 

Answer 6

 $(document).ready(function() { $(".parent").on("click", function(){ $(this).parent().find(":checkbox").prop('checked', true); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <input type="checkbox" id="choice_5621_1" class="parent"> Parent 1 check all <br /> <input type="checkbox" id="choice_5621_1_1"> <br /> <input type="checkbox" id="choice_5621_1_2"> <br /> <input type="checkbox" id="choice_5621_1_3"> </div> <br /> <br /> <div> <input type="checkbox" id="choice_5621_2" class="parent"> Parent 2 check all <br /> <input type="checkbox" id="choice_5621_2_1"> <br /> <input type="checkbox" id="choice_5621_2_2"> <br /> <input type="checkbox" id="choice_5621_2_3"> </div> 

但是也許您應該切換它們。

編輯切換，就像皮特的答案一樣！ 並像我一樣使用nextall代替parent。