Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Multi-selection of Checkboxes on button click in jQuery?
Multi-selecting checkboxes is a common requirement in web forms. This can be achieved using jQuery to toggle all checkboxes with a single button click.
Approach
We'll use jQuery's prop() method to set the checked property of multiple checkboxes and toggleClass() to manage the button state.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multi-selection Checkboxes</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
.changeColor {
color: red;
background-color: #f0f0f0;
}
table {
margin-top: 10px;
}
td {
padding: 5px;
}
</style>
</head>
<body>
<input type="button" id="selectDemo" value="Want To Select All Values" />
<table>
<tr>
<td>
<input type="checkbox" id="CheckBoxId1" class="isSelected" /> Javascript
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="CheckBoxId2" class="isSelected" /> MySQL
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="CheckBoxId3" class="isSelected" /> MongoDB
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="CheckBoxId4" class="isSelected" /> Python
</td>
</tr>
</table>
<script>
jQuery("#selectDemo").click(function () {
jQuery(this).toggleClass("changeColor");
if (jQuery(this).hasClass("changeColor")) {
jQuery(".isSelected").prop("checked", true);
jQuery(this).val("Want To UnSelect All Values");
} else {
jQuery(this).removeClass("changeColor");
jQuery(".isSelected").prop("checked", false);
jQuery(this).val("Want To Select All Values");
}
});
</script>
</body>
</html>
How It Works
The solution uses several jQuery methods:
-
toggleClass()- Adds or removes the "changeColor" class from the button -
hasClass()- Checks if the button has the "changeColor" class -
prop("checked", true/false)- Sets the checked property of all checkboxes with class "isSelected" -
val()- Changes the button text based on current state
Key Features
- Toggle functionality: Single button toggles between select all and unselect all
- Visual feedback: Button changes color when checkboxes are selected
- Dynamic text: Button text updates to reflect current action
- Class-based selection: All checkboxes with class "isSelected" are affected
Alternative Approach
You can also use a more concise approach by checking the current state of checkboxes:
<script>
jQuery("#selectDemo").click(function () {
var isAllChecked = jQuery(".isSelected:checked").length === jQuery(".isSelected").length;
jQuery(".isSelected").prop("checked", !isAllChecked);
jQuery(this).val(isAllChecked ? "Want To Select All Values" : "Want To UnSelect All Values");
jQuery(this).toggleClass("changeColor", !isAllChecked);
});
</script>
Conclusion
jQuery makes multi-selection of checkboxes simple using prop() and class-based selectors. The toggle functionality provides an intuitive user experience for selecting or deselecting multiple items at once.
Updated on: 2026-03-15T23:18:59+05:30
525 Views
Advertisements