Menu
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!
824
Clicking on the master checkbox selects all checkboxes; and unchecking it, deselects all checkboxes. Create a new file 'CheckAllCheckboxes. html'. Set up five checkbox elements in a paragraph with an ID of checkBoxes.
Simply check or uncheck multiple checkboxes at a time by clicking and dragging. Allows you to check multiple checkboxes quickly by CLICKING & DRAGGING or even quicker with an ALT+CLICK & DRAG area select.
To uncheck a checkbox programmatically in React, we can set the checked prop of the checkbox to a state. We have the checked state that we used to set the checked prop of the checkbox. Then we add a button that calls setChecked to toggle the checked value when we click the button.
If you need to uncheck the checkbox, set its checked property to false . To set a checkbox to checked/unchecked in TypeScript: Select the checkbox element. Type the element as HTMLInputElement using a type assertion.
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>
<button type="reset">Uncheck all</button>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
