Checkboxes in HTML table with Jquery: Checked All, Unchecked,
Enable, Disable operationObjective
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
Suppose we have a HTML table as below.
HTML for above table is as below,
Point to be noted in above HTML
All the checkboxes in table body rows are sharing a class chcktb1.
There is a checkbox in the header of the table and id of this table is
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
Before applying Jquery we need to take care below points.
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
We will select checkbox of table rows as
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
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
the curly braces, we will write the code to check or uncheck the
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.
we check header checkbox all the checkbox will get checked and vice
versa.Requirement #2: Counting number of Checkbox checked or unchecked
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
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
user should get an error alert and all unchecked checkbox should get
disabled. Script will be as below
in above table when user selected 4th
checkbox after that all the
uncheck checkboxes are disabled.
Full HTML with JQuery is as below,