11

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
  • 113
  • 1
  • 1
  • 5
  • Thanks Guys. The reason for this is that I'm attempting to perform a toggle() event on the optgroup header. When a user clicks this, it will collapse the section associated with it, however, it will show the items that are checked. It works if you toggle the event back and forth without checking/unchecking an item. The problem I am having though is that if you have an item that is checked on page load, the toggle() will work. If you uncheck it, the toggle() will not work for that item because I am looking at the checked attribute. Is there another way to do this? – Chris Sep 14 '10 at 17:10
  • you do not need to escape single quotes that are wrapped in double quotes – RobertPitt Sep 14 '10 at 17:54

4 Answers4

23

In jQuery for removing an attribute use 

this.removeAttr('checked');

and for setting an attribute use

this.attr('checked', 'checked');
Martin Buberl
  • 45,844
  • 25
  • 100
  • 144
Deviprasad Das
  • 4,203
  • 7
  • 36
  • 51
6
$(this).prop('checked',false)

or

$(this).prop('checked',true)
Phillip Senn
  • 46,771
  • 90
  • 257
  • 373
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.

bobince
  • 528,062
  • 107
  • 651
  • 834
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.

casablanca
  • 69,683
  • 7
  • 133
  • 150
  • 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? – Chris Sep 14 '10 at 16:59
  • You just need to use the `checked` property of the element, for eg. `$('#id')[0].checked` – casablanca Sep 14 '10 at 21:01