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

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

1 个答案: