.prop('checked',false) or .removeAttr('checked')?

Question

With the introduction of the prop method, now I need to know the accepted way of unchecking a checkbox. Is it:

$('input').filter(':checkbox').removeAttr('checked');

or

$('input').filter(':checkbox').prop('checked',false);

Have you read John Resig's post? http://ejohn.org/blog/jquery-16-and-attr/ — Jared Farrish, May 29 '11 at 19:17

score 149 · Accepted Answer · edited Jun 20 '20 at 09:12

jQuery 3

As of jQuery 3, removeAttr does not set the corresponding property to false anymore:

Prior to jQuery 3.0, using .removeAttr() on a boolean attribute such as checked, selected, or readonly would also set the corresponding named property to false. This behavior was required for ancient versions of Internet Explorer but is not correct for modern browsers because the attribute represents the initial value and the property represents the current (dynamic) value.

It is almost always a mistake to use .removeAttr( "checked" ) on a DOM element. The only time it might be useful is if the DOM is later going to be serialized back to an HTML string. In all other cases, .prop( "checked", false ) should be used instead.

Changelog

Hence only .prop('checked',false) is correct way when using this version.

Original answer (from 2011):

For attributes which have underlying boolean properties (of which checked is one), removeAttr automatically sets the underlying property to false. (Note that this is among the backwards-compatibility "fixes" added in jQuery 1.6.1).

So, either will work... but the second example you gave (using prop) is the more correct of the two. If your goal is to uncheck the checkbox, you really do want to affect the property, not the attribute, and there's no need to go through removeAttr to do that.

@tandu: You *can*, but you shouldn't. From the docs: "**Note:** Do not use [`removeProp()`] to remove native properties such as checked, disabled, or selected. This will remove the property completely and, once removed, cannot be added again to element. Use `.prop()` to set these properties to false instead." `removeProp` is really intended for use with custom properties only. — John Flatness, Oct 11 '11 at 20:51

score 25 · Answer 2 · edited Dec 28 '17 at 23:52

25

use checked : true, false property of the checkbox.

jQuery:

if($('input[type=checkbox]').is(':checked')) {
    $(this).prop('checked',true);
} else {
    $(this).prop('checked',false);
}

edited Dec 28 '17 at 23:52

YakovL

7,557
12
62
102

answered Mar 03 '14 at 07:01

Suraj Rawat

3,685
22
33

We can eliminate if, else using one liner, $(this).prop('checked', $('input[type=checkbox]').is(':checked')); – Yousaf Hassan Sep 10 '19 at 22:35
how can we mention the ctrl id to be checked for status? – singhswat Feb 15 '23 at 13:29
if($(''#id').is(':checked')) { $(this).prop('checked',true); } else { $(this).prop('checked',false); } – Suraj Rawat Feb 16 '23 at 16:59

score 15 · Answer 3 · answered Apr 08 '16 at 20:45

15

I recommend to use both, prop and attr because I had problems with Chrome and I solved it using both functions.

if ($(':checkbox').is(':checked')){
    $(':checkbox').prop('checked', true).attr('checked', 'checked');
}
else {
    $(':checkbox').prop('checked', false).removeAttr('checked');
}

answered Apr 08 '16 at 20:45

Ragnar

4,393
1
27
40

Yes, for chrome, use : `$("input[type='checkbox'], input[type='radio']").prop("checked", false).attr("checked", false).removeAttr("checked");` – Rod Aug 04 '17 at 13:37
I use custom component (CSS + JS) to replace input radio and checkbox. This is the only one way which works for me. Thanks! – Silvio Delgado Apr 09 '19 at 21:33
@ragnar this solution worked for me. Thanks! – Souvik Ray Apr 22 '22 at 16:44

score 2 · Answer 4 · edited Dec 28 '22 at 23:14

2

Another alternative to do the same thing is to filter on type=checkbox attribute:

$('input[type="checkbox"]').removeAttr('checked');

or

$('input[type="checkbox"]').prop('checked' , false);

From the jQuery API Documentation:

The difference between attributes and properties can be important in specific situations. Before jQuery 1.6, the .attr() method sometimes took property values into account when retrieving some attributes, which could cause inconsistent behavior. As of jQuery 1.6, the .prop() method provides a way to explicitly retrieve property values, while .attr() retrieves attributes.

edited Dec 28 '22 at 23:14

Henry Ecker

34,399
18
41
57

answered Jul 24 '14 at 08:34

tonnoz

454
4
12

3

The question was "Which one of these is more correct", ?not "Are there any other ways of doing this?". You don't appear to have attempted to answer the question – Andrew Stubbs Jul 24 '14 at 08:55

score -4 · Answer 5 · answered Jun 25 '21 at 07:49

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>   

  

  <input id="checkbox" type="checkbox" onchange='act(this)'>
     
  <input id="checkbox" type="checkbox" onchange='act(this)'>
  
  <script>
  
  
   function act(element){
   
       if($(element). prop('checked'))  
       {
           console.log('You have Checked it');
       }else
       {
        console.log('You Un-Checked it');
       }
   }
   
   </script>

This code snippet does not answer the original question of what is the accepted (correct) way of unchecking a checkbox. — seemly, Jun 25 '21 at 09:33

.prop('checked',false) or .removeAttr('checked')?

5 Answers5

Linked