Adding checked attribute via jQuery

47,884

Solution 1

In jQuery for removing an attribute use

this.removeAttr('checked');

and for setting an attribute use

this.attr('checked', 'checked');

Solution 2

$(this).prop('checked',false)

or

$(this).prop('checked',true)

Solution 3

I've noticed that by simply clicking on the checkbox the checked attribute does not appear

That's absolutely correct. The checked attribute does not correspond to the current checkedness of the input; it actually corresponds to the initial checkedness from the HTML document, the checkedness that will be reinstated if the form is reset.

IE adds the attribute because IE is wrong. getAttribute/setAttribute are broken in IE—never use them on an HTML document!—they actually set the property, not the attribute.

This is the defaultChecked property. But why are you trying to set the checked attribute? There is almost never a good reason to. Normally the plain old checked property is what you're looking for.

Solution 4

In using Firebug, I've noticed that by simply clicking on the checkbox the checked attribute does not appear as I would expect it to.

Why do you need the checked attribute at all? The checked property provides all the functionality that you would normally need, i.e. checking the box will set element.checked to true and vice versa, i.e. modifying element.checked will change the state of the box.

Share:
47,884

Related videos on Youtube

Chris
Author by

Chris

Updated on May 31, 2020

Comments

  • Chris
    Chris about 4 years

    I am using the following widget http://www.erichynds.com/examples/jquery-ui-multiselect-widget/demos/ It has worked great so far, but I need some help in adding attributes. In using Firebug, I've noticed that by simply clicking on the checkbox the checked attribute does not appear as I would expect it to. In my code, I've modified the widget, I've been able to add code to remove the attribute of checked.

    this.removeAttribute(\'checked\'); this.checked=false;
    

    if the item was checked beforehand. I've been successful in using this code

    this.setAttribute(\'checked\', \'checked\'); this.checked=true; 
    

    if the item was unchecked when the page loads.

    My problem is coming when I need to be able to utilize both sets of code on the checkbox, I've attempted the following

    onclick="if($(this).attr(\'checked\') == \'true\') { this.setAttribute(\'checked\', \'checked\'); this.checked=true; } else { this.removeAttribute(\'checked\'); this.checked=false; }
    

    the code will remove the attribute of checked (if checked before hand on page load), but when I attempt to click on the checkbox to add the attribute (if not checked on page load), nothing happens.

    Thanks for any help, and sorry for my poor coding.

  • Chris
    Chris almost 14 years
    I'm ultimately using the checked property to toggle the optgroups for a show/hide effect. If the code finds that an item is checked when the toggle event is triggered, then show the items that are checked, if not hide them. Is there another way to accomplish this goal?
  • casablanca
    casablanca almost 14 years
    You just need to use the checked property of the element, for eg. $('#id')[0].checked
  • David Brossard
    David Brossard almost 5 years
    Is this equivalent to $(this).attr("checked","checked");?
  • chakeda
    chakeda over 4 years
    This is the preferred answer to jQuery 3.0+ (api.jquery.com/prop)

Related