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將無法正常工作。

您的上述代碼在提供了一些事件處理程序后將起作用。