Multiple Checkbox Select/Deselect using jQuery – Tutorial with Example
Almost all the user interfaces that I have created had this functionality of selecting multiple items from a list to process them or delete them. Although its very very easy to implement this functionality in Javascript, using jQuery for this is real fun. I will show you a simple implementation of adding multiple checkbox select and deselect functionality to any webpage. We will have a table with some data in it and checkbox in each row. There will be a select all checkbox in the header of the table. If user select/deselect the selectall checkbox, all the checkbox in table will get selected or deselected accordingly. Now one more thing we would like here to add is, suppose user select all the checkbox one by one then the selectall checkbox should be automatically gets selected. And if user click selectall first and then unchecks any of the checkbox, then the selectall also should be unchecked automatically. Let’s check the code.

The HTML

<HTML>
<HEAD>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
 <TITLE>Multiple Checkbox Select/Deselect - DEMO</TITLE>
</HEAD>
<BODY>
 <H2>Multiple Checkbox Select/Deselect - DEMO</H2>
<table border="1">
<tr>
 <th><input type="checkbox" id="selectall"/></th>
 <th>Cell phone</th>
 <th>Rating</th>
</tr>
<tr>
 <td align="center"><input type="checkbox" class="case" name="case" value="1"/></td>
 <td>BlackBerry Bold 9650</td>
 <td>2/5</td>
</tr>
<tr>
 <td align="center"><input type="checkbox" class="case" name="case" value="2"/></td>
 <td>Samsung Galaxy</td>
 <td>3.5/5</td>
</tr>
<tr>
 <td align="center"><input type="checkbox" class="case" name="case" value="3"/></td>
 <td>Droid X</td>
 <td>4.5/5</td>
</tr>
<tr>
 <td align="center"><input type="checkbox" class="case" name="case" value="4"/></td>
 <td>HTC Desire</td>
 <td>3/5</td>
</tr>
<tr>
 <td align="center"><input type="checkbox" class="case" name="case" value="5"/></td>
 <td>Apple iPhone 4</td>
 <td>5/5</td>
</tr>
</table>

</BODY>
</HTML>

Code language: HTML, XML (xml)

The jQuery Code

Add following jQuery code in HEAD section of above HTML 
<SCRIPT language="javascript">
$(function(){

 // add multiple select / deselect functionality
 $("#selectall").click(function () {
    $('.case').attr('checked', this.checked);
 });

 // if all checkbox are selected, check the selectall checkbox
 // and viceversa
 $(".case").click(function(){

  if($(".case").length == $(".case:checked").length) {
   $("#selectall").attr("checked", "checked");
  } else {
   $("#selectall").removeAttr("checked");
  }

 });
});
</SCRIPT>

Code language: JavaScript (javascript)
Here in above code at line 05, we register a handler on click of selectall checkbox. On click of this checkbox, we check/uncheck all checkbox in the datatable. Also check the link 13, where we check the selectall checkbox, if all the checkbox are selected manually. To get more idea, play with the below demo.

Online Demo

 Click here to view Online Demo

View Comments

Leave a Comment
Share
Published by
Viral Patel
Tags: How-To JavaScript JQuery jquery tips tricks
14 years ago

Recent Posts

  • Java

Java URL Encoder/Decoder Example

Java URL Encoder/Decoder Example - In this tutorial we will see how to URL encode/decode…

4 years ago
  • General

How to Show Multiple Examples in OpenAPI Spec

Show Multiple Examples in OpenAPI - OpenAPI (aka Swagger) Specifications has become a defecto standard…

4 years ago
  • General

How to Run Local WordPress using Docker

Local WordPress using Docker - Running a local WordPress development environment is crucial for testing…

4 years ago
  • Java

Create and Validate JWT Token in Java using JJWT

1. JWT Token Overview JSON Web Token (JWT) is an open standard defines a compact…

4 years ago
  • Spring Boot

Spring Boot GraphQL Subscription Realtime API

GraphQL Subscription provides a great way of building real-time API. In this tutorial we will…

4 years ago
  • Spring Boot

Spring Boot DynamoDB Integration Test using Testcontainers

1. Overview Spring Boot Webflux DynamoDB Integration tests - In this tutorial we will see…

5 years ago