How to reset all checkboxes using jQuery or pure JS?

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

Answers:

Answer

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

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

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().

Answer

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.

Answer

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

Comment here: How to reset all checkboxes using jQuery or pure JS?

Answer

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; 
}); 
Answer
 $(":checkbox:checked").each(function () {

 this.click(); 
});

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

Answer

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

Answer

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.

Answer

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); 
});
Answer

I used something like that

$(yourSelector).find('input:checkbox').removeAttr('checked');
Answer
<!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>

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.