How can I reset all checkboxes in a document using jQuery or pure JS?
Add a comment
|
14 Answers
If you mean how to remove the 'checked' state from all checkboxes:
$('input:checkbox').removeAttr('checked');
Update
in jQuery v1.6 and higher, use
$('input:checkbox').prop('checked', false)
4 Comments
Sundeep
This script is toggling the state of check boxes. Not sure if I am doing something wrong
Henry C
Note that in jQuery v1.6 and higher, you should be using .prop('checked', false) instead for greater cross-browser compatibility - see api.jquery.com/prop
Gayane
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);
ejntaylor
This is now an obsolete answer - see: stackoverflow.com/questions/17420534/…
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().
3 Comments
rafaelmorais
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.
Patricio Rossi
This is not RE SETTING the checkbox, is UN SETTING it, you need to use item.defaultChecked to reset to the original state!
noraj
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.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
Comments
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.
Comments
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;
});
1 Comment
Patricio Rossi
I almost answered the same! there is a difference between reset and unset ! UP
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
Comments
$(":checkbox:checked").each(function () {
this.click();
});
to unchecked checked box, turn your logic around to do opposite
Comments
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);
});
Comments
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.
Comments
Easy. by class GIVE ME A LIKE
$('.YUCLASS').prop('checked', false);
or
$('.YUCLASS').removeAttr('checked');
Resetall checkbox
Comments
I used something like that
$(yourSelector).find('input:checkbox').removeAttr('checked');
Comments
<!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>
1 Comment
GhostCat
Code only answers are discouraged. You really want to include some explanations.
<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;
}
}
Comments
I used
jQuery('my_selector_of_checkboxes').prop('checked', false).trigger()
