In this article, you will learn how to select all or deselect all checkboxes using JQuery or Javascript. In this article, we will select all or deselect all by using jquery prop() function and by using pure javascript code. Sometimes, we needed to delete or archive multiple records by selecting all records.
Here are Some examples to select All or deselect all checkboxes using JQuery or Javascript.
In this example, we used the prop() function to select all or deselect all the checkboxes dynamically on button click or on hyperlink click. This prop() function requires Jquery library 1.6 or above version.
Here is the source code of the Example to select All or deselect all checkboxes using JQuery dynamically using the prop() function in Jquery.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>How to Select All or DeSelect All CheckBoxes using Jquery or Javascript</title>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</head>
<body>
<table border="1">
<thead>
<tr>
<td><input type="checkbox" id="chk_select_deselect" name="chk_select_deselect" /> Select ALL / DeSelect ALL</td>
<td>Language</td>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" id="checkbox1" name="checkbox" value="C#" /></td>
<td>C#</td>
</tr>
<tr>
<td><input type="checkbox" id="checkbox2" name="checkbox" value="C++" /></td>
<td>C++</td>
</tr>
<tr>
<td><input type="checkbox" id="checkbox3" name="checkbox" value="PHP" /></td>
<td>PHP</td>
</tr>
<tr>
<td><input type="checkbox" id="checkbox4" name="checkbox" value="Python" /></td>
<td>Python</td>
</tr>
<tr>
<td><input type="checkbox" id="checkbox5" name="checkbox" value="Javascript" /></td>
<td>Javascript</td>
</tr>
</tbody>
</table>
<script>
$("#chk_select_deselect").on("click", function () {
if ($("#chk_select_deselect").prop("checked")) {
$("input[name=checkbox]").prop("checked", true);
} else {
$("input[name=checkbox]").prop("checked", false);
}
});
$("input[name=checkbox]").change(function () {
//".checkbox" change
//uncheck "select all", if one of the listed checkbox item is unchecked
if (this.checked == false) {
//if this item is unchecked
//change "select all" checked status to false
$("#chk_select_deselect")[0].checked = false;
}
//check "select all" if all checkbox items are checked
if ($("input[name=checkbox]:checked").length == $("input[name=checkbox]").length) {
//change "select all" checked status to true
$("#chk_select_deselect")[0].checked = true;
}
});
</script>
</body>
</html>In this example, we used the Jquery loop to select all or deselect all the checkboxes dynamically.
Here is the source code of the Example to select All or deselect all checkboxes dynamically using loop in Jquery.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>How to Select All or DeSelect All CheckBoxes using Jquery or Javascript</title>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</head>
<body>
<table border="1">
<thead>
<tr>
<td><input type="checkbox" id="chk_select_deselect" name="chk_select_deselect" /> Select ALL / DeSelect ALL</td>
<td>Language</td>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" id="checkbox1" name="checkbox" value="C#" /></td>
<td>C#</td>
</tr>
<tr>
<td><input type="checkbox" id="checkbox2" name="checkbox" value="C++" /></td>
<td>C++</td>
</tr>
<tr>
<td><input type="checkbox" id="checkbox3" name="checkbox" value="PHP" /></td>
<td>PHP</td>
</tr>
<tr>
<td><input type="checkbox" id="checkbox4" name="checkbox" value="Python" /></td>
<td>Python</td>
</tr>
<tr>
<td><input type="checkbox" id="checkbox5" name="checkbox" value="Javascript" /></td>
<td>Javascript</td>
</tr>
</tbody>
</table>
<script>
// add multiple select / deselect functionality
//select all checkboxes
$("#chk_select_deselect").change(function () {
//"select all" change
var status = this.checked; // "select all" checked status
$("input[name=checkbox]").each(function () {
//iterate all listed checkbox items
this.checked = status; //change ".checkbox" checked status
});
});
$("input[name=checkbox]").change(function () {
//".checkbox" change
//uncheck "select all", if one of the listed checkbox item is unchecked
if (this.checked == false) {
//if this item is unchecked
$("#chk_select_deselect")[0].checked = false; //change "select all" checked status to false
}
//check "select all" if all checkbox items are checked
if ($("input[name=checkbox]:checked").length == $("input[name=checkbox]").length) {
$("#chk_select_deselect")[0].checked = true; //change "select all" checked status to true
}
});
</script>
</body>
</html>In this example, we are not using any Jquery function. Here is the pure javascript reference for select all or deselect all checkboxes using javascript.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>How to Select All or DeSelect All CheckBoxes using Jquery or Javascript</title>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</head>
<body>
<table border="1">
<thead>
<tr>
<td><input type="checkbox" id="chk_select_deselect" name="chk_select_deselect" /> Select ALL / DeSelect ALL</td>
<td>Language</td>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" id="checkbox1" name="checkbox" value="C#" /></td>
<td>C#</td>
</tr>
<tr>
<td><input type="checkbox" id="checkbox2" name="checkbox" value="C++" /></td>
<td>C++</td>
</tr>
<tr>
<td><input type="checkbox" id="checkbox3" name="checkbox" value="PHP" /></td>
<td>PHP</td>
</tr>
<tr>
<td><input type="checkbox" id="checkbox4" name="checkbox" value="Python" /></td>
<td>Python</td>
</tr>
<tr>
<td><input type="checkbox" id="checkbox5" name="checkbox" value="Javascript" /></td>
<td>Javascript</td>
</tr>
</tbody>
</table>
<script>
var select_all = document.getElementById("chk_select_deselect"); //select all checkbox
var checkboxes = document.getElementsByName("checkbox"); //checkbox items
//select all checkboxes
select_all.addEventListener("click", 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("click", 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>I hope this article will help you to understand how to select all or deselect all the checkboxes dynamically using Jquery or javascript.
Share your valuable feedback, please post your comment at the bottom of this article. Thank you!
Comments