$(this).checked not picking up checked boxes

Question

I have a function that is not picking up checkboxes correctly (if checked) with this function:

function playerJson() {
    players = [];
    $('input[name=playerCheckList]').each(function () {
        if ($(this).checked) {
            players.push($(this).val());
        }
    });

    return $.toJSON(players);
}

I use this function to check all buttons (correctly)

 $(function () {
    $("#checkAllPlayers").click(function () {
        $('input[name=playerCheckList]').each(function () {
            $(this).prop('checked', true);
        });
    });
});

If I don't have the if statement:

if ($(this).checked) 

from the first piece of code, it correctly picks up all the values (checked or not)

So, this statement is probably the problem, but I'm not sure why.

Thanks

Answer 1

That is referring to a jQuery object, which has no property 'checked' (The DOM would have that property though). You need to get the attribute value.

$(this).prop("checked");

Edit: I support qwertynl's answer because vanilla.js

Answer 2

$(this).checked does not work because $(this) is a jQuery oject.

Just look at the checked attribute of the DOM object (this):

...
if (this.checked) {
    players.push(this.value);
}
...

Answer 3

As the other answers say, .checked will not work on a jQuery object.

This is easier visualized this way:

$(this).checked returns undefined/error because it is a jQuery object, not an element.
$(this)[0].checked returns the value of checked because you are referencing the element itself, not the jQuery object referencing the element.

Below is a modified and fixed version of your script, eliminating the use of jQuery entirely for checked and for value as they are a pointless use of jQuery. The other use makes a little more sense, and so it will remain in my answer.

function playerJson() {
        players = [];
        $('input[name=playerCheckList]').each(function () {
            if (this.checked) {
                players.push(this.value);
            }
        });
        return $.toJSON(players);
    }