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.

clip_image001

And HTML for above table is as below,

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>">
<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.

clip_image003

 

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

clip_image004

3. We will select checkbox of table rows as

clip_image006

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.

clip_image008

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.

clip_image009

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);

        }
    });

Output

clip_image010

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

Requirement #2: Counting number of Checkbox checked or unchecked

 

clip_image011 

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

clip_image013

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>

clip_image017 

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

Full HTML with JQuery is as below,

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>">
<head>
     <script src="<a href="http://code.jquery.com/jquery-latest.min.js">http://code.jquery.com/jquery-latest.min.js"></script</a>>
</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>
<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>
<script type="text/javascript">
    $('#chckHead').click(function () {

        if (this.checked == false) {

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

        }
    }); 

</script>

</html>
Advertisements

7 thoughts on “Checkboxes in HTML table with Jquery : Checked All , Unchecked , Enable , Disable operation

  1. Good article.

    It works fine in IE8, but don’t work in Firefox or Chrome, only fire at the first time. becase .attr only changes the default statues, any one who found the same problem, please try .prop instead.

  2. Nice article…
    On the same, can you show how to display the values of the rows of the checkbox checked, in the separate table……

    Thankx

  3. Great article. Thanks very much.

    I hope you don’t mind, but I would like to contribute some of the code that I wrote as a result of reading this article. I believe that we should give back to the community.

    It is useful to have #chckHead “bound” to the total selected .chcktbl elements. That way, when the page is loaded, #chckHead is selected/de-selected based on whether all .chcktbl elements are selected.

    Also, when .chcktbl is checked, we want to check if that event results in all .chcktbl elements being checked. If so, we want to set #chckHead to checked. Similarly, if all .chcktbl are checked and an event fires that unchecks one, we want @chckHead to also be unchecked.

    This is code with some comments to explain:

    // call the function as the page loads to set the initial state of #chckHead
    SetSelectAllCheckBox();

    $("#chckHead").click(function () {
    // use the inherit boolean return value to set the checkbox state
    $(".chcktbl").attr("checked", this.checked);
    });

    $(".chcktbl").click(function() {
    SetSelectAllCheckBox();
    });

    function SetSelectAllCheckBox() {
    // use a conditional operator to do the comparison between total elements and those that are selected
    var allAreSelected = ($(".chcktbl").length == $(".chcktbl:checked").length) ? true : false;
    // then use the boolean var to set the checkbox state
    $("#chckHead").attr("checked", allAreSelected);
    }

  4. Great tutorial, but works much better if you use $(‘.chcktbl’).prop(‘checked’, [true/false]), rather than using .attr(). When I used .attr() in Chrome, the checkboxes would only check once by using the top checkbox. After that, although the markup would should the ‘checked’ attribute, they didn’t appear to be checked.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s