Checkbox checked attribute behavior

Question

I have a list of inputs of type checkbox in HTML, and JS uses an array variable to mark some of them as checked, like this:

profileData.interests.forEach(interest => {
 $(`#profile-interests input#${interest}`).attr("checked", true)
})

Then the user is free to check / uncheck any inputs, and once he's done, he can click save, and I need to get the list of currently checked inputs (their IDs) and put them in a variable.

If I use this code, the list of inputs will be the initial one (from the initial variable):

$("#profile-interests input").each(function() {
    if ($(this).attr('checked')) {
      newInterests.push($(this).attr('id'))
    }
})

If I use this code, the list of inputs is correct and corresponds to what I see on the page:

$("#profile-interests input:checked").each(function() {
  newInterests.push($(this).attr('id'))
})

What's wrong with the first option?

Thanks!

because checked attribute is not modified by browser, you can also see it from devtools. — apple apple
– apple apple, Commented Feb 23, 2021 at 17:41
It does not indicate whether this checkbox is currently checked -- MDN — apple apple
– apple apple, Commented Feb 23, 2021 at 17:42

Terry · Accepted Answer · 2021-02-23 17:42:59Z

That is because .attr() and .prop() returns different things. .prop() should be used to check for the value of boolean properties/attributes, like checked, readonly, disabled and etc.

On the other hand, $("#profile-interests input:checked") contains the CSS :checked pseudo-selector that will match checked elements properly and does not rely on the mechanism used in .attr() (basically, functionally identical to using .prop().

There are two solutions:

Use .prop('checked') instead of .attr('checked')
Even simpler, use this.checked, where this refers to the checkbox element itself

Solution 1: Use .prop():

$("#profile-interests input").each(function() {
    if ($(this).prop('checked')) {
        newInterests.push($(this).attr('id'))
    }
});

Solution 2: Use native checked property:

$("#profile-interests input").each(function() {
    if (this.checked) {
        newInterests.push($(this).attr('id'))
    }
});

On a similar note, you should avoid using .attr() to toggle the checked property. Use .prop instead:

profileData.interests.forEach(interest => {
    // Option 1:
    $(`#profile-interests input#${interest}`).prop("checked", true)

    // Option 2:
    $(`#profile-interests input#${interest}`)[0].checked = true;
});

Frenchy · Accepted Answer · 2021-02-23 17:40:32Z

1

attr() and prop() dont return the same thing:

.attr('checked'); // "checked"
// new property method
.prop('checked'); // true

its better to use .prop, you'll have always boolean

answered Feb 23, 2021 at 17:40

Frenchy

17.1k3 gold badges21 silver badges42 bronze badges

Collectives™ on Stack Overflow

Checkbox checked attribute behavior

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related