How to reset all checkboxes using jQuery or pure JS?

Question

How can I reset all checkboxes in a document using jQuery or pure JS?

score 164 · Accepted Answer · answered Feb 17 '10 at 10:16

164

If you mean how to remove the 'checked' state from all checkboxes:

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

answered Feb 17 '10 at 10:16

Tatu Ulmanen

123,288
34
187
185

This script is toggling the state of check boxes. Not sure if I am doing something wrong – Sundeep May 17 '11 at 14:33
47

Note that in jQuery v1.6 and higher, you should be using .prop('checked', false) instead for greater cross-browser compatibility - see http://api.jquery.com/prop/ – Henry C Apr 24 '13 at 06:34
I used this to reset the form before opening new dialog. After this I need to put one checkbox 'checked' and this doesn't work. When I look at generated code it is 'checked' but on my page it is not $('input:checkbox').removeAttr('checked'); $('input[value='+val+']').attr('checked',true); – Gayane Oct 24 '13 at 12:30
1

This is now an obsolete answer - see: https://stackoverflow.com/questions/17420534/check-uncheck-checkbox-using-jquery – ejntaylor Aug 22 '17 at 14:19

score 55 · Answer 2 · edited Apr 16 '18 at 14:19

55

If you want to use form's reset feature, you'd better to use this:

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

OR

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

Looks like removeAttr() can not be reset by form.reset().

edited Apr 16 '18 at 14:19

vsync

118,978
58
307
400

answered Feb 12 '12 at 17:41

Kevin Q. Yu

559
4
2

1

Although the accepted answer works too, I find this the best way to do it. Please, if you're reading this, consider using this way, since its best practice to. – rafaelmorais Mar 07 '19 at 09:45
This is not RE SETTING the checkbox, is UN SETTING it, you need to use item.defaultChecked to reset to the original state! – Patricio Rossi Apr 13 '21 at 01:39
Thanks, in my browser checking a checkbox doesn't add a `checked` attribute, it only changes the `checked` property of the DOM element to `true`, so the accepted answer doesn't work and your does. – noraj Jul 12 '22 at 15:50

jef · Answer 3 · 2023-02-10T01:16:14.140

17

I have used this before:

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

It seems that .attr() and .removeAttr() doesn't work for some situations.

Note: In jQuery v1.6 and higher, you should be using .prop('checked', false) instead for greater cross-browser compatibility - see https://api.jquery.com/prop

edited Feb 10 '23 at 01:16

answered Nov 15 '16 at 21:52

jef

173
1
7

score 15 · Answer 4 · answered May 17 '11 at 18:59

15

The above answer did not work for me -

The following worked

$('input[type=checkbox]').each(function() 
{ 
        this.checked = false; 
});

This makes sure all the checkboxes are unchecked.

answered May 17 '11 at 18:59

Sundeep

1,536
5
23
35

score 13 · Answer 5 · answered Feb 21 '14 at 05:39

13

In some cases the checkbox may be selected by default. If you want to restore default selection rather than set as unselected, compare the defaultChecked property.

$(':checkbox').each(function(i,item){ 
        this.checked = item.defaultChecked; 
});

answered Feb 21 '14 at 05:39

Dean Burge

3,440
25
22

I almost answered the same! there is a difference between reset and unset ! UP – Patricio Rossi Apr 13 '21 at 01:37

score 10 · Answer 6 · answered Jan 10 '18 at 16:59

Javascript

var clist = document.getElementsByTagName("input");
for (var i = 0; i < clist.length; ++i) { clist[i].checked = false; }

jQuery

$('input:checkbox').each(function() { this.checked = false; });

To do opposite, see: Select All Checkboxes By ID/Class

score 4 · Answer 7 · answered Apr 17 '12 at 13:32

4

 $(":checkbox:checked").each(function () {

 this.click(); 
});

to unchecked checked box, turn your logic around to do opposite

answered Apr 17 '12 at 13:32

Yene Mulatu

2,226
1
17
13

score 3 · Answer 8 · edited May 23 '17 at 11:47

As said in Tatu Ulmanen's answer using the follow script will do the job

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

But, as Blakomen's comment said, after version 1.6 it's better to use jQuery.prop() instead

Note that in jQuery v1.6 and higher, you should be using .prop('checked', false) instead for greater cross-browser compatibility

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

Be careful when using jQuery.each() it may cause performance issues. (also, avoid jQuery.find() in those case. Use each instead)

$('input[type=checkbox]').each(function() 
{ 
    $(this).prop('checked', false); 
});

score 3 · Answer 9 · answered Aug 08 '14 at 05:40

You can be selective of what div or part of your page can have checkboxes checked and which don't. I came across the scenario where I have two forms in my page and one have prefilled values(for update) and other need to be filled fresh.

$('#newFormId input[type=checkbox]').attr('checked',false);

this will make only checkboxes in form with id newFormId as unchecked.

score 1 · Answer 10 · answered Aug 18 '13 at 15:03

1

I used something like that

$(yourSelector).find('input:checkbox').removeAttr('checked');

answered Aug 18 '13 at 15:03

Andrej Gaspar

231
2
8

score 1 · Answer 11 · answered Sep 05 '17 at 18:28

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container check">
<button class="btn">click</button>
  <input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car<br>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car<br>
</div>
<script>
$('.btn').click(function() {

$('input[type=checkbox]').each(function() 
{ 
        this.checked = false; 
}); 
})
</script>
</body>
</html>

Code only answers are discouraged. You really want to include some explanations. — GhostCat, Sep 05 '17 at 18:47

Carlos · Answer 12 · 2022-03-10T17:13:36.360

1

Easy. by class GIVE ME A LIKE

$('.YUCLASS').prop('checked', false);

or

$('.YUCLASS').removeAttr('checked');

Resetall checkbox

edited Mar 10 '22 at 17:13

answered Mar 10 '22 at 16:51

Carlos

572
1
5
13

score 0 · Answer 13 · answered Dec 10 '21 at 12:31

<input type="checkbox" id="bike" name="vehicle" value="bike">
<label for="bike">Bike</label>
<input type="checkbox" id="car" name="vehicle" value="car">
<label for="car">Car</label>
<button id="select">Select All</button>

JavaScript #1

Get all the checkboxes using the name field,

document.getElementById('select').onclick = function() {
    var checkboxes = document.getElementsByName('vehicle');
    for (var checkbox of checkboxes) {
    checkbox.checked = false;
    }
}

JavaScript #2

If there is no other input tags other than checkboxes,

document.getElementById('select').onclick = function() {
    var checkboxes = document.getElementsByTagName("input");
    for (var checkbox of checkboxes) {
    checkbox.checked = false;
    }
}

score 0 · Answer 14 · answered Mar 02 '23 at 10:19

0

I used

jQuery('my_selector_of_checkboxes').prop('checked', false).trigger()

answered Mar 02 '23 at 10:19

fvictoire

1
1

How to reset all checkboxes using jQuery or pure JS?

14 Answers14

Javascript

jQuery

Linked

Related