Question

当选中任何带有.child-term类的复选框时，我自动需要使用class .parent-term检查前面的复选框。

我只想检查前面的.parent-term类，而不是所有具有.parent-class的复选框。同样适用于.child-term类。任何带有.child-term的复选框只会影响上面的.parent-term。

如果从.sub-term复选框中选中.parent-term类，则在取消选中所有关联的.sub-term框时，.parent-term可以保持检查状态。

我尝试了各种解决方案，但我无法弄清楚。

我开始了jsfiddle。

<ul class="cpt-terms-checkbox">
    <li class="parent-term church" id="category-church"><input id="church"
    name="church" type="checkbox" value="church">Church</li>

    <li><small>Sub Categories:</small></li>

    <li class="child-term elder" id="category-elder"><input id="elder"
    name="elder" type="checkbox" value="elder">Elder</li>
    <li class="child-term interim-pastor" id="category-interim-pastor">
    <input id="interim-pastor" name="interim-pastor" type="checkbox" value=
    "interim-pastor">Interim Pastor</li>

    <li class="parent-term law-firm" id="category-law-firm"><input id=
    "law-firm" name="law-firm" type="checkbox" value="law-firm">Law
    Firm</li>

    <li><small>Sub Categories:</small></li>

    <li class="child-term attorney" id="category-attorney"><input id=
    "attorney" name="attorney" type="checkbox" value=
    "attorney">Attorney</li>
    <li class="child-term attorney" id="category-attorney"><input id=
    "attorney" name="attorney" type="checkbox" value=
    "attorney">Paralegal</li>
</ul>

添加到Anoop Joshi的解决方案中。。。我将.parent（）更改为.parents（），因此它会向上移动，对于那些可以在Wordpress中运行它的人，我将它包装在一个匿名函数中。

(function($) {
    $(".child-term :input").change(function() {
        if (this.checked) {
            $(this).parents().prevAll(".parent-term:first").find("input").prop("checked", true);
        }
    });
})( jQuery );

Answer 1

使用prevAll()获取具有指定选择器的所有先前节点。

然后，您可以使用:first选择器获取前一个元素

$(".child-term :input").change(function() {
  if (this.checked) {
    $(this).parent().prevAll(".parent-term:first").find("input").prop("checked", true);
  }
});

Fiddle

选中子项时自动检查父级

1 个答案: