How to use jquery to fill in checkboxes in an html table

No.of Views2660
Bookmarked0 times
Downloads 
Votes0
By  Dhananjay Kumar   On  01 Nov 2010 02:11:02
Tag : JQuery , Grid Controls
Checkboxes in HTML table with Jquery: Checked All, Unchecked, Enable, Disable operation
emailbookmarkadd commentsprint

Images in this article missing? We recently lost them in a site migration. We're working to restore these as you read this. Should you need an image in an emergency, please contact us at info@codegain.com

 

Introduction

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. 

Image Loading

And HTML for above table is as below,

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
    <table id="tbl" border="10">
        <thead>
            <tr>
                <td>
                    <input type="checkbox" id="chckHead" />
                </td>
                <td>
                    First Row
                </td>
                <td>
                    Second Row
                </td>
                <td>
                    Third Row
                </td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <input type="checkbox" class="chcktbl" />
                </td>
                <td>
                    1
                </td>
                <td>
                    1
                </td>
                <td>
                    1
                </td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" class="chcktbl" />
                </td>
                <td>
                    2
                </td>
                <td>
                    2
                </td>
                <td>
                    2
                </td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" class="chcktbl" />
                </td>
                <td>
                    3
                </td>
                <td>
                    3
                </td>
                <td>
                    3
                </td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" class="chcktbl" />
                </td>
                <td>
                    4
                </td>
                <td>
                    4
                </td>
                <td>
                    4
                </td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" class="chcktbl" />
                </td>
                <td>
                    5
                </td>
                <td>
                    5
                </td>
                <td>
                    5
                </td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" class="chcktbl" />
                </td>
                <td>
                    6
                </td>
                <td>
                    6
                </td>
                <td>
                    6
                </td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" class="chcktbl" />
                </td>
                <td>
                    7
                </td>
                <td>
                    7
                </td>
                <td>
                    7
                </td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" class="chcktbl" />
                </td>
                <td>
                    8
                </td>
                <td>
                    8
                </td>
                <td>
                    8
                </td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" class="chcktbl" />
                </td>
                <td>
                    9
                </td>
                <td>
                    9
                </td>
                <td>
                    9
                </td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" class="chcktbl" />
                </td>
                <td>
                    10
                </td>
                <td>
                    10
                </td>
                <td>
                    10
                </td>
            </tr>
        </tbody>
    </table>
</body>
</html>

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. 

Image Loading

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 

Image Loading

3.    We will select checkbox of table rows as

Image Loading

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. 

Image Loading

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. 

Image Loading

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.

<script type="text/javascript">
    $('#chckHead').click(function () {

        if (this.checked == false) {

            $('.chcktbl:checked').attr('checked', false);
        }
        else {
            $('.chcktbl:not(:checked)').attr('checked', true);

        }
    });


    $('#chckHead').click(function () {

    });

</script>

Output

Image Loading

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

Requirement #2: Counting number of Checkbox checked or unchecked 

Image Loading

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 

Image Loading

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,

<script type="text/javascript">
    $('.chcktbl').click(function () {
        var length = $('.chcktbl:checked').length;       
        if (length > 3) {
            alert(length);
            $('.chcktbl:not(:checked)').attr('disabled', true);
        }
        else {
            $('.chcktbl:not(:checked)').attr('disabled', false);
        }
    });
</script>

Ouput

Image Loading

So in above table when user selected 4th checkbox after that all the uncheck checkboxes are disabled.

Full HTML with JQuery is as below

HTML and Javascript Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

    <script src="http://code.jquery.com/jquery-latest.min.js"></script> 
   
<script type="text/javascript">
    $('.chcktbl').click(function() {
        var length = $('.chcktbl:checked').length;
        if (length > 3) {
            alert(length);
            $('.chcktbl:not(:checked)').attr('disabled', true);
        }
        else {
            $('.chcktbl:not(:checked)').attr('disabled', false);
        }
    });
    $('#chckHead').click(function() {

        if (this.checked == false) {

            $('.chcktbl:checked').attr('checked', false);
        }
        else {
            $('.chcktbl:not(:checked)').attr('checked', true);

        }
    });


    $('#chckHead').click(function() {

    });

</script>
</head>
<body>
    <table id="tbl" border="10">
        <thead>
            <tr>
                <td>
                    <input type="checkbox" id="chckHead" />
                </td>
                <td>
                    First Row
                </td>
                <td>
                    Second Row
                </td>
                <td>
                    Third Row
                </td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <input type="checkbox" class="chcktbl" />
                </td>
                <td>
                    1
                </td>
                <td>
                    1
                </td>
                <td>
                    1
                </td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" class="chcktbl" />
                </td>
                <td>
                    2
                </td>
                <td>
                    2
                </td>
                <td>
                    2
                </td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" class="chcktbl" />
                </td>
                <td>
                    3
                </td>
                <td>
                    3
                </td>
                <td>
                    3
                </td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" class="chcktbl" />
                </td>
                <td>
                    4
                </td>
                <td>
                    4
                </td>
                <td>
                    4
                </td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" class="chcktbl" />
                </td>
                <td>
                    5
                </td>
                <td>
                    5
                </td>
                <td>
                    5
                </td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" class="chcktbl" />
                </td>
                <td>
                    6
                </td>
                <td>
                    6
                </td>
                <td>
                    6
                </td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" class="chcktbl" />
                </td>
                <td>
                    7
                </td>
                <td>
                    7
                </td>
                <td>
                    7
                </td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" class="chcktbl" />
                </td>
                <td>
                    8
                </td>
                <td>
                    8
                </td>
                <td>
                    8
                </td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" class="chcktbl" />
                </td>
                <td>
                    9
                </td>
                <td>
                    9
                </td>
                <td>
                    9
                </td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" class="chcktbl" />
                </td>
                <td>
                    10
                </td>
                <td>
                    10
                </td>
                <td>
                    10
                </td>
            </tr>
        </tbody>
    </table>
</body>
</html>

That's all. enjoy fast and easiy client side code with jquery.

 
Sign Up to vote for this article
 
About Author
 
Dhananjay Kumar
Occupation-Software Engineer
Company-Infosys Technolgies,Pune
Member Type-Gold
Location-India
Joined date-20 Jul 2009
Home Page-http://dhananjaykumar.net/
Blog Page-http://dhananjaykumar.net/
Dhananjay Kumar is Microsoft MVP on connected system. He blogs at http://dhananjaykumar.net/ . You can follow him http://twitter.com/debugmode_/ and reach him at dhananjay.25july@gmail.com
 
 
Other popularSectionarticles
    In this article I will demonstration to how to validate whether to check at least one checkbox is checked in the Gridview in ASP.NET using JQuery. The JQuery is significant library to manipulate client html and css with less line of code.Before Jquery come up we have used the pure JavaScript to implement this features. I will give the JavaScript code as well in end of this article.
    Published Date : 30/Dec/2010
    Today I have implemented to my project to check and uncheck all checkboxes within gridview in asp.net. So in this article we focus how to implement this features using JQuery with less code. And also I have given live demonstration as well you can try it in live.
    Published Date : 29/Dec/2010
    In this article, I will explain how to sort custom objects array using JQuery. Let’s say you have array with custom objects, the custom object has few attributes as well, so in this case, you may need to sort objects with different order with specific attributes.
    Published Date : 12/Jan/2011
    The JQuery is powerful library to manipulate client side HTML, CSS, object and etc. On this article I will explain how to sort element within array using JQuery. In this demonstration I will show sort for string and numeric elements.
    Published Date : 11/Jan/2011
    Today I have introduced the new features for CodeGain article submit page to count characters for description textbox with JQuery on time. The character counter is support to users to display how many characters have entered and how many chars remaining in live.
    Published Date : 25/Dec/2010
Comments
There is no comments for this articles.
Leave a Reply
Title:
Display Name:
Email:
(not display in page for the security purphase)
Website:
Message:
Please refresh your screen using Ctrl+F5
If you can't read this number refresh your screen
Please input the anti-spam code that you can read in the image.
^ Scroll to Top