.NET Tutorials, Forums, Interview Questions And Answers
Welcome :Guest
 
Sign In
Register
 
Win Surprise Gifts!!!
Congratulations!!!


Top 5 Contributors of the Month
david stephan

Home >> Articles >> JQuery >> Post New Resource Bookmark and Share   

 Subscribe to Articles

Checkboxes in HTML table with Jquery: Checked All, Unchecked, Enable, Disable operation

Posted By:Dhananjay Kumar       Posted Date: October 31, 2010    Points: 50    Category: JQuery    URL: http://www.dotnetspark.com  

Checkboxes in HTML table with Jquery: Checked All, Unchecked, Enable, Disable operation. This article will show the basic operation with HTML table and Check box with JQuery in asp.net.
 

Checkboxes in HTML table with Jquery: Checked All, Unchecked, Enable, Disable operation

Objective

In this article we will see,

1.  How to apply Jquery on HTML table?

2.  How to check and uncheck all the checkboxes?

3.  How to check how many numbers of checkboxes are checked?

4.  How to disable and enable the checkboxes.

Suppose we have a HTML table as below.



And HTML for above table is as below,





First Row Second Row Third Row
1 1 1
2 2 2
3 3 3
4 4 4
5 5 5
6 6 6
7 7 7
8 8 8
9 9 9
10 10 10


Point to be noted in above HTML

1.  All the checkboxes in table body rows are sharing a class chcktb1.

2.  There is a checkbox in the header of the table and id of this table is chkHead.

To work with Jquery on the HTML table, we need to include JQuery file in Head section of HTML.



Requirement #1: Checking and Unchecking all the checkboxes

When we click on top checkbox all the checkbox should get checked. If already checkbox are checked then they should get unchecked.
We will use Jquery for this operation.

Before applying Jquery we need to take care below points.

1.  Id of the header checkbox is chkHead. So on the click event we will write the code for checking or unchecking operation on checkbox of all the rows

2.  We will select header checkbox as



3.  We will select checkbox of table rows as



Note: If we see the above selection of control.  If we are controlling a HTML control by ID, we have to select it by dot(.) . In above we are selecting checkboxes of table body with dot (.) because they are decorated with class. If a control is decorated with ID then we will select them with hash (#)

4.  After the body tag writes a script for checking or unchecking all the checkboxes.




Now in above Jquery script

1.  We are selecting the checkbox of the table head (Thead) with # tag. Because if you see , we have given the ID for this checkbox.

2.  On the click function, we are calling the anonymous function.


In the curly braces, we will write the code to check or uncheck the checkboxes.

3.  This keyword represents the selected control. So header checkbox is being selected and we are calling click event of that. First we are checking, if header checkbox is checked then all the rows checkbox will be checked and vice versa.

4.  We are checking if row checkboxes are checked then we are unchecking them and vice versa.
Script would look like below. 



Output:



If we check header checkbox all the checkbox will get checked and vice versa.

Requirement #2: Counting number of Checkbox checked or unchecked



Above script will give the number of checkboxes checked.  If you see the HTML, all the row checkboxes are having the same class called chcktb1.

To find all the uncheck checkboxes



Requirement #3: Disabling checking of checkboxes if 4 checkbox are already checked.

Let us say we have a requirement that user should able to select only 4 out of 10 checkboxes. When user tries to check 5th checkbox, user should get an error alert and all unchecked checkbox should get disabled.

 Script will be as below





So in above table when user selected 4th checkbox after that all the uncheck checkboxes are disabled.
Full HTML with JQuery is as below,




      


First Row Second Row Third Row
1 1 1
2 2 2
3 3 3
4 4 4
5 5 5
6 6 6
7 7 7
8 8 8
9 9 9
10 10 10

 Subscribe to Articles

     

Further Readings:

Responses

No response found. Be the first to respond this post

Post Comment

You must Sign In To post reply
Find More Articles on C#, ASP.Net, Vb.Net, SQL Server and more Here

Hall of Fame    Twitter   Terms of Service    Privacy Policy    Contact Us    Archives   Tell A Friend