How to reset all checkboxes using jQuery or pure JS?
JavascriptJqueryCheckboxJavascript Problem Overview
How can I reset all checkboxes in a document using jQuery or pure JS?
Javascript Solutions
Solution 1 - Javascript
If you mean how to remove the 'checked' state from all checkboxes:
$('input:checkbox').removeAttr('checked');
Solution 2 - Javascript
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().
Solution 3 - Javascript
I have used this before:
$('input[type=checkbox]').prop('checked', false);
seems that .attr and .removeAttr doesn't work for some situations.
edit: Note that 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
Solution 4 - Javascript
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.
Solution 5 - Javascript
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;
});
Solution 6 - Javascript
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: <https://stackoverflow.com/q/1032827/55075>
Solution 7 - Javascript
$(":checkbox:checked").each(function () {
this.click();
});
to unchecked checked box, turn your logic around to do opposite
Solution 8 - Javascript
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);
});
Solution 9 - Javascript
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.
Solution 10 - Javascript
I used something like that
$(yourSelector).find('input:checkbox').removeAttr('checked');
Solution 11 - Javascript
<!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>
Solution 12 - Javascript
Easy. by class GIVE ME A LIKE
$('.YUCLASS').prop('checked', false);
or
$('.YUCLASS').removeAttr('checked');
Resetall checkbox
Solution 13 - Javascript
<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;
}
}