Monday, June 3, 2024
 Popular · Latest · Hot · Upcoming
74
rated 0 times [  78] [ 4]  / answers: 1 / hits: 29530  / 10 Years ago, sat, march 22, 2014, 12:00:00

I have this code that is possible to check/uncheck all checkboxes and check/uncheck a single checkbox.



  <!DOCTYPE HTML>
<html>
<head>
<meta charset=utf-8>
<title>Persist checkboxes</title>
</head>
<body>
<div>
<label for=checkAll>Check all</label>
<input type=checkbox id=checkAll>
</div>
<div>
<label for=option1>Option 1</label>
<input type=checkbox id=option1>
</div>
<div>
<label for=option2>Option 2</label>
<input type=checkbox id=option2>
</div>
<div>
<label for=option3>Option 3</label>
<input type=checkbox id=option3>
</div>

<script src=http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js></script>
<script src=http://cdn.jsdelivr.net/jquery.cookie/1.4.0/jquery.cookie.min.js></script>

<script>
$(#checkAll).on(change, function() {
$(':checkbox').not(this).prop('checked', this.checked);
});

$(:checkbox).on(change, function(){
var checkboxValues = {};
$(:checkbox).each(function(){
checkboxValues[this.id] = this.checked;
});
$.cookie('checkboxValues', checkboxValues, { expires: 7, path: '/' })
});

function repopulateCheckboxes(){
var checkboxValues = $.cookie('checkboxValues');
if(checkboxValues){
Object.keys(checkboxValues).forEach(function(element) {
var checked = checkboxValues[element];
$(# + element).prop('checked', checked);
});
}
}

$.cookie.json = true;
repopulateCheckboxes();
</script>





My question is that I want to make a button that will have a function that will clear or uncheck all checkboxes. Could some help me do that? Thanks!


More From » jquery

 Answers
151

Calling the following function on button click will do:


function uncheckAll(){
$('input[type="checkbox"]:checked').prop('checked',false);
}



function uncheckAll() {
$(input[type='checkbox']:checked).prop(checked, false)
}
$(':button').on('click', uncheckAll)

<script src=https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js></script>
<input type='checkbox' />
<input type='checkbox' />
<input type='checkbox' />
<input type='checkbox' />
<input type='checkbox' />
<input type='button' value=clear />






Pure JS version:




function uncheckAll() {
document.querySelectorAll('input[type=checkbox]')
.forEach(el => el.checked = false);
}

document.querySelector('button').addEventListener('click', uncheckAll)

<script src=https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js></script>
<input type='checkbox' />
<input type='checkbox' />
<input type='checkbox' />
<input type='checkbox' />
<input type='checkbox' checked/>
<button>Clear</button>




[#71853] Thursday, March 20, 2014, 10 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
karivictoriab

Total Points: 530
Total Questions: 90
Total Answers: 95

Location: Honduras
Member since Sun, Dec 26, 2021
2 Years ago
;