选中复选框并使用jquery将样式应用于父元素

我有一个带有如下复选框的列表：

<ul class="cate_select_ul">
    <li>
        <!-- outer checkbox A -->
        <label><input value="251" type="checkbox" name="post_category[]">Automobiles &amp; Transport</label>
        <ul class="children">
            <li>
                <!-- inner checkbox A -->
                <label><input value="252" type="checkbox" name="post_category[]">Car Parts</label>
            </li>
        </ul>
    </li>
    <li>
        <!-- outer checkbox B -->
        <label><input value="251" type="checkbox" name="post_category[]">Automobiles &amp; Transport</label>
        <ul class="children">
            <li>
                <!-- inner checkbox B -->
                <label><input value="252" type="checkbox" name="post_category[]">Car Parts</label>
            </li>
        </ul>
    </li>

</ul>

---

关于如何使其工作，有什么想法吗？

您的示例不起作用，因为$this试图选择标记类型为的元素。由于该元素不存在，因此未选择任何内容

通常，$this应该是$this，因为它不是字符串，但是在您的例子中，它并不引用您认为它引用的元素，因为它看起来不存在任何作用域。在您的例子中，变量this可能引用窗口对象；您可以随时使用console.logthis进行检查

对于解决方案，您可以使用迭代元素，以便引用当前选中的输入元素。您也不需要将.parent方法链接四次，因为您可以使用来选择指定的最近祖先：

当然，您实际上不需要使用每个方法，因为您可以直接选择元素

在下一行中，用于选择已选中输入[name=post_category[]]子代元素的ul.children元素。从此处，选择上一个标签元素并更改相应的CSS：

作为旁注，如果您想将其放入更改事件侦听器中，它将如下所示：

<ul class="cate_select_ul">
    <li>
        <!-- outer checkbox A -->
        <label><input value="251" type="checkbox" name="post_category[]">Automobiles &amp; Transport</label>
        <ul class="children">
            <li>
                <!-- inner checkbox A -->
                <label><input value="252" type="checkbox" name="post_category[]">Car Parts</label>
            </li>
        </ul>
    </li>
    <li>
        <!-- outer checkbox B -->
        <label><input value="251" type="checkbox" name="post_category[]">Automobiles &amp; Transport</label>
        <ul class="children">
            <li>
                <!-- inner checkbox B -->
                <label><input value="252" type="checkbox" name="post_category[]">Car Parts</label>
            </li>
        </ul>
    </li>

</ul>

---

你把你的片段放在哪里了？你应该确保你能从$this中得到什么。这不仅是一个正确的答案。我能学到这么多！非常感谢你！！！亲爱的Josh，当我尝试更改时，我没有只为空的子复选框列表的标签上色，所有外部标签都变为红色=有什么提示吗？@mesqueeb那么我很确定你想把：not-around:has像$'ul.孩子们：not:has…'。所以它应该是$'ul.children:not:hasinput[name=post_category[]]：checked'.prev'label'.css'color'，f00'；->。谢谢你，乔希！结合您的3个示例，我得到了我所需要的：您认为这段代码符合您的标准吗^^@梅斯奎布：是的；看起来不错。

$('ul.children input[name="post_category[]"]:checked').each(function() {
  $(this).closest('.children').prev('label').css('color', '#f00');
});

$('ul.children:has(input[name="post_category[]"]:checked)').prev('label').css('color', '#f00');

$('ul.children input[name="post_category[]"]').on('change', function() {
  $(this).closest('.children').prev('label').toggleClass('selected', this.checked);
});