Adding checked attribute via jQuery
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.
Related videos on Youtube
Chris
Updated on May 31, 2020Comments
-
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 almost 14 yearsI'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 almost 14 yearsYou just need to use the
checked
property of the element, for eg.$('#id')[0].checked
-
David Brossard almost 5 yearsIs this equivalent to $(this).attr("checked","checked");?
-
chakeda over 4 yearsThis is the preferred answer to jQuery 3.0+ (api.jquery.com/prop)