为什么这个简单的JavaScript函数不能按我预期的那样工作？ 尝试确定是否已选中复选框

Question

I have HTML in the following form:

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

My JavaScript function is as follows:

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

The problem I'm having is that $(this).checked always returns false.

Answer 1

jQuery objects don't have a checked property. Try this:

this.checked

or

$(this).prop("checked")

I find the first way easier to read, and it is certainly more efficient, but some people insist on using jQuery for everything, so...

Answer 2

checked is a property of the DOM element, not of a jQuery object.

if (this.checked) {

---

You can also retrieve said property with the .prop jQuery object method:

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

However the snippet above creates a new jQuery object and calls a method on it, which is not recommended - it is unnecessary, provides slower performance and takes more typing. I do also find the native method easier to read.

.prop is more appropriate when working with a set of elements or passing a selector instead of a DOM element reference.

Though, choose whichever you find more readable and maintainable, as both work just fine for your use case.