1

我有以下形式的 HTML：

<div id="filters">
    <ul>
        <li><label class="checkbox"><input type="checkbox" value="" checked data-filter=".one">One</label></li>
        <li><label class="checkbox"><input type="checkbox" value="" checked data-filter=".two">Two</label></li>
        <li><label class="checkbox"><input type="checkbox" value="" checked data-filter=".three">Three</label></li>
        <li><label class="checkbox"><input type="checkbox" value="" checked data-filter=".four">Four</label></li>
        <li><label class="checkbox"><input type="checkbox" value="" checked data-filter=".five">Five</label></li>
        <li><label class="checkbox"><input type="checkbox" value="" checked data-filter=".six">Six</label></li>
    </ul>
</div>

我的 JavaScript 函数如下：

<!-- language: lang-js -->
function initFilters()
{
    $('#filters input').each(function(){
        if ($(this).checked) {
            console.log($(this).attr('data-filter')+' is checked');
            addFilter($(this).attr('data-filter'));
        } else {
            console.log($(this).attr('data-filter')+' is unchecked');
            removeFilter($(this).attr('data-filter'));
        };
    });
}

我遇到的问题是$(this).checked总是返回false。

4

2 回答 2

5

jQuery 对象没有checked属性。试试这个：

this.checked

或者

$(this).prop("checked")

我发现第一种方式更容易阅读，而且效率更高，但是有些人坚持使用 jQuery 来处理所有事情，所以......

于 2012-11-11T00:20:41.270 回答
3

checked是 DOM 元素的属性，而不是 jQuery 对象的属性。

if (this.checked) {

您还可以使用.propjQuery 对象方法检索所述属性：

if ($(this).prop("checked")) {

然而，上面的代码片段创建了一个新的 jQuery 对象并在其上调用了一个方法，这是不推荐的 - 这是不必要的，提供了较慢的性能并需要更多的输入。我也发现本地方法更容易阅读。

.prop在使用一组元素或传递选择器而不是 DOM 元素引用时更合适。

不过，请选择您认为更具可读性和可维护性的任何一个，因为两者都适合您的用例。

于 2012-11-11T00:20:35.020 回答