Check and uncheck all checkboxes using jQuery
Today, in this short article we’ll share with you a simple code to check and uncheck all checkboxes using jQuery. In this article we will create a simple HTML form and try to implement checkboxes for select/deselect demo.
- Generate a random number in given range using JavaScript
- 5 ways to improve your coding skills
- jQuery color picker using bootstrap 3
- Convert datetime to another time zone using Moment JS
- Find common values from two Arrays in JavaScript
1. Create an HTML form
Let’s create an HTML form where we will have multiple checkboxes that can be controlled by the Select All
checkbox.
<form method="post" action="">
<h3>Select or Deselect all Checkboxes using jQuery - <a href="https://codepremix.com" target="_blank" rel="noopener noreferrer">Code Premix</a></h3>
<label><input type="checkbox" id="checkAll" /> Select All</label><br /><br />
<label><input class="chk" type="checkbox" name=item[] value="1" /> Item 1</label><br />
<label><input class="chk" type="checkbox" name=item[] value="2" /> Item 2</label><br />
<label><input class="chk" type="checkbox" name=item[] value="3" /> Item 3</label><br />
<label><input class="chk" type="checkbox" name=item[] value="4" /> Item 4</label><br />
<label><input class="chk" type="checkbox" name=item[] value="5" /> Item 5</label>
</form>
Here, we have added the master checkbox with id checkAll
to select or deselect all checkboxes and added the other checkboxes with class chk
.
2. Include jQuery library
In the next step, we need to include the following jQuery library in the head section.
<script src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
3. Add script for select/deselect functionality
We’ll use the .prop()
method to toggle the checkbox on the click of the Select All
checkbox to select / deselect all checkboxes.
<script>
$(document).ready(function () {
$("#checkAll").change(function () {
$("input:checkbox").prop('checked', $(this).prop("checked"));
});
});
</script>
After selecting the all the checkbox, the user deselects any of the checkboxes, the master checkbox should be deselected. Similarly, if master checkbox deselect and user select all checkbox one by one then the master checkbox will be selected.
To do this, when the checkbox with class ‘chk’ is clicked, we will check the length of the selected checkbox with class chk
and total checkbox with class chk
. If both are the same then the master checkbox with id checkAll
will be selected otherwise deselected.
<script>
$(document).ready(function () {
...
...
$('.chk').on('click', function () {
if ($('.chk:checked').length == $('.chk').length) {
$('#checkAll').prop('checked', true);
} else {
$('#checkAll').prop('checked', false);
}
});
});
</script>
4. Output
At the last, combine the all above code and run the page in the browser.
index.html
<html>
<head>
<title>Select or Deselect all Checkboxes using jQuery - Code Premix</title>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
form {
margin: 20px;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script>
$(document).ready(function () {
$("#checkAll").change(function () {
$("input:checkbox").prop('checked', $(this).prop("checked"));
});
$('.chk').on('click', function () {
if ($('.chk:checked').length == $('.chk').length) {
$('#checkAll').prop('checked', true);
} else {
$('#checkAll').prop('checked', false);
}
});
});
</script>
</head>
<body>
<form method="post" action="">
<h3>Check and uncheck all checkboxes using jQuery - <a href="https://codepremix.com" target="_blank"
rel="noopener noreferrer">Code Premix</a></h3>
<label><input type="checkbox" id="checkAll" /> Select All</label><br /><br />
<label><input class="chk" type="checkbox" name=item[] value="1" /> Item 1</label><br />
<label><input class="chk" type="checkbox" name=item[] value="2" /> Item 2</label><br />
<label><input class="chk" type="checkbox" name=item[] value="3" /> Item 3</label><br />
<label><input class="chk" type="checkbox" name=item[] value="4" /> Item 4</label><br />
<label><input class="chk" type="checkbox" name=item[] value="5" /> Item 5</label>
</form>
</body>
</html>