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

 });
   });

here is my fiddle

Answer 1

您可以使用nextUntil获取父级后面的子复选框。如果删除if语句，您也可以将父项设置为切换。

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

Example fiddle

Answer 2

在条件中设置复选框值时，您错过了jquery选择器。您还需要修改选择器以仅在作为父级的下一个.pc-box复选框之前定位元素。使用：

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

<强> Demo

选中父复选框上的子复选框

2 个答案: