選中父復選框的子點擊復選框

Question

我有一個html代碼，其中分別有兩個父復選框和它們的子復選框。 選中父級復選框后，應選中屬於該父級的子級。 就我而言，如果我選中一個父復選框，則所有子復選框都被選中。 我知道它的類名問題，我可以用兩個不同的類名命名並解決問題。 但是我不能更改類名。 應該是一樣的。 我該如何解決？？

index.html

        Parent1<input name="parent" class="pc-box" type="checkbox">
        Child 1<input class="check" name="child" type="checkbox">
        Child 2<input class="check" name="child" type="checkbox">
        Child 3<input class="check" name="child" type="checkbox">
        <br>
        Parent2<input name="parent" class="pc-box" type="checkbox" >
        Child 1 <input class="check" name="child" type="checkbox">
        Child 2 <input class="check" name="child" type="checkbox">
        Child 3 <input class="check" name="child" type="checkbox">

index.js

$(document).ready(function() {

$(".pc-box").click(function() {
if (this.checked) {
       ('.check').prop('checked',$(this).prop('checked'));
    }

 });
   });

這是我的小提琴

Answer 1

您可以使用nextUntil來獲取父級之后的子級復選框。 如果刪除if語句，還可以使父級進入切換狀態。

$('.pc-box').change(function() {
    $(this).nextUntil('.pc-box').prop('checked', $(this).prop('checked')); 
});

小提琴的例子

Answer 2

在條件中設置復選框值時，您錯過了jquery選擇器。 您還需要修改選擇器，使其僅定位到下一個.pc-box復選框（充當父級）之前的元素。 采用：

$(document).ready(function() {
$(".pc-box").click(function() {
 if (this.checked) {
   $(this).nextUntil('.pc-box').prop('checked',$(this).prop('checked'));
 }
});});

演示版