Add attribute 'checked' on click jquery

Question

I've been trying to figure out how to add the attribute "checked" to a checkbox on click. The reason I want to do this is so if I check off a checkbox; I can have my local storage save that as the html so when the page refreshes it notices the checkbox is checked. As of right now if I check it off, it fades the parent, but if I save and reload it stays faded but the checkbox is unchecked.

I've tried doing $(this).attr('checked'); but it does not seem to want to add checked.

EDIT: After reading comments it seems i wasn't being clear. My default input tag is:

<input type="checkbox" class="done">

I need it top be so when I click the checkbox, it adds "checked" to the end of that. Ex:

<input type="checkbox" class="done" checked>

I need it to do this so when I save the html to local storage, when it loads, it renders the checkbox as checked.

$(".done").live("click", function(){
if($(this).parent().find('.editor').is(':visible') ) {
var editvar = $(this).parent().find('input[name="tester"]').val();
$(this).parent().find('.editor').fadeOut('slow');
$(this).parent().find('.content').text(editvar);
$(this).parent().find('.content').fadeIn('slow');
}
if ($(this).is(':checked')) {
$(this).parent().fadeTo('slow', 0.5);
$(this).attr('checked'); //This line
}else{

$(this).parent().fadeTo('slow', 1);
$(this).removeAttr('checked');
}
});

score 41 · Answer 1 · edited May 23 '17 at 12:08

41

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

just attr( 'checked' ) will return the value of $( this )'s checked attribute. To set it, you need that second argument. Based on <input type="checkbox" checked="checked" />

Edit:

Based on comments, a more appropriate manipulation would be:

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

And a straight javascript method, more appropriate and efficient:

this.checked = true;

Thanks @Andy E for that.

edited May 23 '17 at 12:08

Community

1
1

answered Aug 04 '10 at 17:37

hookedonwinter

12,436
19
61
74

4

Because of the way jQuery maps attributes to DOM properties, `$(this).attr('checked', true);` is more appropriate. `this.checked = true;` is even more appropriate, being more efficient. – Andy E Aug 04 '10 at 17:39
@[Andy E] oh cool. didn't know that. editing my answer to reflect. – hookedonwinter Aug 04 '10 at 17:40
@hookedonwinter: based on your update I think it would be rude of me not to upvote ;) +1. – Andy E Aug 04 '10 at 17:44
Thanks for the answer, but this doesn't seem to want to add the attribute 'checked' to my checkbox. It seems I can do anything else, "'val', true" etc. But 'checked', true doesn't want to add it. – MoDFoX Aug 04 '10 at 17:54
Could you elaborate? Maybe you can edit your question with a javascript code sample of what you have. – Java Drinker Aug 04 '10 at 18:16
Definitely works here: http://jsfiddle.net/rWqvQ/1/. If you post your code like @java said, we can fiddle with it. pun intended. – hookedonwinter Aug 04 '10 at 18:18
Sorry, I guess I wasn't being clear. That may work to make the checkbox check off, but in the actual tag, the attribute "checked" isn't added. Updating main post. – MoDFoX Aug 04 '10 at 18:36
It won't appear in the source, but it should if you inspect element in chrome, safari, or firefox (with the appropriate add-on installed) – hookedonwinter Aug 04 '10 at 18:46
That's what I thought would happen, but for some reason this one attribute won't work. – MoDFoX Aug 04 '10 at 19:18
I suppose you could use jquery to remove the element, and then put it back in totally fleshed out. You'd have to store the name, value, etc., and then .remove() and then .append( '' ) – hookedonwinter Aug 04 '10 at 20:07
@MoDFoX - If you are using `html()` or some such to peek at the HTML, you may be running into something similar to http://stackoverflow.com/questions/1388893/jquery-html-in-firefox-uses-innerhtml-ignores-dom-changes/1388965#1388965 – gnarf Aug 04 '10 at 21:53
Note that as of 1.9 to check the checkboxes using .attr or setAttribute wont work. you have to use .prop()... `.prop('checked', false)` or `.prop('checked', true)` from the [**.attr()**](http://api.jquery.com/attr/) docs it says `To retrieve and change DOM properties such as the checked, selected, or disabled state of form elements, use the .prop() method.` – John Ruddell Nov 12 '14 at 20:19

Tim Down · Accepted Answer · 2013-07-04T09:18:46.577

It seems this is one of the rare occasions on which use of an attribute is actually appropriate. jQuery's attr() method will not help you because in most cases (including this) it actually sets a property, not an attribute, making the choice of its name look somewhat foolish. [UPDATE: Since jQuery 1.6.1, the situation has changed slightly]

IE has some problems with the DOM setAttribute method but in this case it should be fine:

this.setAttribute("checked", "checked");

In IE, this will always actually make the checkbox checked. In other browsers, if the user has already checked and unchecked the checkbox, setting the attribute will have no visible effect. Therefore, if you want to guarantee the checkbox is checked as well as having the checked attribute, you need to set the checked property as well:

this.setAttribute("checked", "checked");
this.checked = true;

To uncheck the checkbox and remove the attribute, do the following:

this.setAttribute("checked", ""); // For IE
this.removeAttribute("checked"); // For other browsers
this.checked = false;

I like what you have here, but OP did ask for jQuery. But, +1 for straight js. Good to know the core before you learn the framework. — hookedonwinter, Aug 04 '10 at 21:44
Well, I'm not sure jQuery actually does this. Could be wrong though. — Tim Down, Aug 04 '10 at 21:48
Thank you for your help, straight javascript is absolutely fine with me, I had just been using jquery so I figured I would ask. Again, thanks for your help. — MoDFoX, Aug 05 '10 at 00:12

score 10 · Answer 3 · edited May 20 '16 at 14:25

10

If .attr() isn't working for you (especially when checking and unchecking boxes in succession), use .prop() instead of .attr().

edited May 20 '16 at 14:25

Carl0s1z

4,683
7
32
47

answered Apr 17 '13 at 16:06

charliepark

1,480
2
13
15

Your answer is the best(imho). Function .attr() just adds the attribute, but does not update the state of checkbox. .prop() - has helped me resolve my problem. – Max Dec 27 '13 at 17:45

score 3 · Answer 4 · edited Jun 22 '20 at 01:05

3

A simple answer is to add checked attributes within a checkbox:

$('input[id='+$(this).attr("id")+']').attr("checked", "checked");

edited Jun 22 '20 at 01:05

DifferentPseudonym

1,004
1
12
28

answered Jun 21 '20 at 19:37

user3632622

31
1

score 2 · Answer 5 · edited May 20 '16 at 14:25

2

use this code

var sid = $(this);
sid.attr('checked','checked');

edited May 20 '16 at 14:25

Carl0s1z

4,683
7
32
47

answered Jan 29 '14 at 07:33

user1948368

213
3
3

Add attribute 'checked' on click jquery

5 Answers5

Linked