With Below Script you can easily Check/Uncheck all checkboxes using Javascript Code.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form id="myForm">
<p><label><input type="checkbox" id="select_all"/> Check all</label></p>
<fieldset>
<legend>Selection of of Countries</legend>
<p><label><input type="checkbox" class="checkbox" name="check[]" /> USA</label></p>
<p><label><input type="checkbox" class="checkbox" name="check[]" /> UK</label></p>
<p><label><input type="checkbox" class="checkbox" name="check[]" /> India</label></p>
<p><label><input type="checkbox" class="checkbox" name="check[]" /> Asia Pacific</label></p>
<p><label><input type="checkbox" class="checkbox" name="check[]" /> Australia</label></p>
<p><label><input type="checkbox" class="checkbox" name="check[]" /> Middle East</label></p>
</fieldset>
</form>
<script language="Javascript">
var select_all = document.getElementById("select_all"); //select all checkbox
var checkboxes = document.getElementsByClassName("checkbox"); //checkbox items
//select all checkboxes
select_all.addEventListener("change", function(e){
for (i = 0; i < checkboxes.length; i++) {
checkboxes[i].checked = select_all.checked;
}
});
for (var i = 0; i < checkboxes.length; i++) {
checkboxes[i].addEventListener('change', function(e){ //".checkbox" change
//uncheck "select all", if one of the listed checkbox item is unchecked
if(this.checked == false){
select_all.checked = false;
}
//check "select all" if all checkbox items are checked
if(document.querySelectorAll('.checkbox:checked').length == checkboxes.length){
select_all.checked = true;
}
});
}
</script>
</body>
</html>
0 Comments