Adding checked attribute via jQuery

Question

Hello all,

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.

Answer 1

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.

Answer 2

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.

Answer 3

In jQuery for removing an attribute use 
this.removeAttr('checked');

and for setting an attribute use
this.attr('checked', 'checked');