jquery - 检查是否选中复选框并使用 jquery 将样式应用于父元素

Question

我有一个带有这样的复选框的列表:

<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>

我想检查内部复选框是否被选中。如果是这样，我想更改父外部复选框周围标签的样式。 我尝试了这个，但它无法正常工作:

if($('ul.children input[name="post_category[]"]:checked').length > 0){
$("this").parent().parent().parent().parent().children("label").css({"color":"red"});
}

关于如何实现这项工作有什么想法吗？

Answer 1

您的示例不起作用，因为 $("this")尝试选择标签类型为 <this> 的元素。由于该元素不存在，因此不会选择任何内容。

通常，$("this")应该是$(this) (因为 this is a keyword 而不是字符串)，但是在您的情况下，它并没有引用您认为它所指的元素，因为它看起来没有任何范围。在您的情况下，变量 this可能指的是window目的;您可以随时通过console.log(this)查看.

<小时/>

至于解决方案，您可以使用 .each() method 迭代元素。为了 this引用当前检查的input元素。您也不需要链接 .parent()方法四次，因为您可以使用 .closest() method为了选择指定的最接近的祖先:

Example Here

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

<小时/>

当然你实际上并不需要使用 .each()方法，因为您可以直接选择元素。

在下面的行中， :has() selector用于选择 ul.children已检查的元素 input[name="post_category[]"]后代元素。从那里开始，之前的 label选择元素并更改相应的 CSS:

Example Here

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

<小时/>

作为旁注，如果您想将其放入 change 中，事件监听器，它看起来像这样:

Updated Example

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