jQuery Li>复选框父级

Question

我一直在研究stackoverflow和api.jquery超过1小时，我决定问一下，因为这里缺少某些东西，我不知道它是什么。

<ul>
    <li>
        <input type="checkbox" **checked**>
        FIRST
    </li>
    <li>
        <input type="checkbox">
        SECOND
    </li>
    <li>
        <input type="checkbox">
        THIRD
    </li>
</ul>

差不多那样。 默认情况下，我已对“ First”输入进行了“检查”。 我想将复选框与其最接近的li关联（以用于将来的Remove-function）。 这是我不可能的部分。 我已经尝试过.parent() .closest .prev()但这一切都给我什么（我什么都不想）。 那就是我正在测试的js代码：

if($('input').prop('checked')) {
    $(this).parent('li').css('color','red');
}

Answer 1

this与代码中已检查的输入无关。 它很可能是窗口对象，它不能神奇地获得您在上面选择的内容的上下文。

另一个问题是您不查找选中的输入，而是选择所有输入，并且在阅读道具时，它是从列表中选择第一个输入，而不是将所有选中的输入都选中。

因此，您需要更改选择器，需要使用每个选择器，现在this将是选中的输入元素。

$('input:checked').each(function(){
    $(this).parent('li').css('color','red');
});

这需要在准备好文档的页面上或在页面上呈现元素之后运行。 并且不需要每个，只需向您显示此内容，您就可以链接呼叫。

$('input:checked').parent('li').css('color','red');

并且请了解标签元素。

Answer 2

首先，让我们看一下您的代码：

// `.prop` does not select elements,
// it returns a property of an element,
// therefore whether the first <input>
// on the page is checked.
if($('input').prop('checked')) {
    // `this` likely does not refer to anything useful
    // Usually, it's only safe to use `$(this)` in `.each`
    // and event handlers.
    $(this).parent('li').css('color','red');
}

我认为您想要这样的东西（ 在此处查看 ）：

// Query for all <input>s which are checked
$('input:checked')
// Select their <li> parents
.parent('li')
// Apply CSS (or do whatever you want, e.g. remove())
.css('color','red');

Answer 3

首先，如果您要检查document.ready上的条件，则必须找到已选择的输入，而没有提供name参数，checked将无法正常工作。

您的上述代码在提供了一些事件处理程序后将起作用。