Javascript check all checkboxes in a table / asp.net

Question

I have a table with rows in, and each row has a few <td> elements. The last element has a checkbox in. They are in a <div> which is set to runat="server". I have another checkbox on the page called "chkAll" that when clicked, I want to javascript check or uncheck all of the checkboxes in my table.

I'm not very good at Javascript, so I am not sure what to do. I added a javascript onclick method, and put document.getelementbyid and put in the div.clientID, but I wasnt sure what to do from there. Any ideas?

Russ Cam · Accepted Answer · 2009-10-09 10:42:27Z

11

once you have the the <div> element as a reference, use getElementsByTagName() to get the <input> elements, then check the type property, if it's a checkbox then set it's checked property the same as the checked property of the checkbox chkAll. For example

function toggleCheckBoxes(elem) {

    var div = document.getElementById('<% = divid.ClientID %>');

    var chk = div.getElementsByTagName('input');
    var len = chk.length;

    for (var i = 0; i < len; i++) {
        if (chk[i].type === 'checkbox') {
            chk[i].checked = elem.checked;
        }
    }        
}

and then attach this function as a click event handler of the chkAll element

<input type="checkbox" id="chkAll" onclick="toggleCheckBoxes(this)" />

Here's a Working Demo. add /edit to the URL to see the code

edited Oct 9, 2009 at 10:42

answered Oct 9, 2009 at 10:36

Russ Cam

126k34 gold badges211 silver badges275 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Russ Cam Over a year ago

no problem - you might also want to set up a click event handler on each checkbox in the <div> to check the checked property of the other checkboxes - if all of them are not checked, then uncheck chkAll checkbox. if all of them are checked, check the chkAll checkbox. I'll leave this as en exercise for you, now that you know how to get checkboxes and check their checked property

rahul · Accepted Answer · 2009-10-09 10:37:34Z

3

Since you are new to javascript I won't recommend using jQuery. Get basic ideas of javascript and then use jQuery.

Try this one

function CheckAll()
{
    var tab = document.getElementById ( "tbl1" ); // table with id tbl1
    var elems = tab.getElementsByTagName ( "input" );
    var len = elems.length;

    for ( var i = 0; i < len; i++ )
    {
        if ( elems[i].type == "checkbox" )
        {
            elems[i].checked = true;
        }
    }
}

If you are confident of using jQuery then you can use

$("#tbl1 input[type='checkbox']").attr ( 'checked' , true );

in the onclick function.

answered Oct 9, 2009 at 10:37

rahul

188k50 gold badges239 silver badges266 bronze badges

2 Comments

NibblyPig Over a year ago

Thanks for your reply! I am trying to get it working, but it cannot find the table, I guess because I create the table in the codebehind dynamically.

Russ Cam Over a year ago

use the ClientID of the table in the JavaScript function. If the function is in the aspx markup, you can use the server-side tags <%= tableid.ClientID %> to render out the generated client id for the table in the HTML markup sent to the client

Paul · Accepted Answer · 2009-10-09 10:34:59Z

1

Try using jQuery - it makes javascript much easier and less verbose.

I think a solution to your problem can be found here:

http://www.iknowkungfoo.com/blog/index.cfm/2008/7/9/Check-All-Checkboxes-with-JQuery

answered Oct 9, 2009 at 10:34

Paul

5,5762 gold badges32 silver badges38 bronze badges

Comments

Himadri · Accepted Answer · 2009-10-09 11:01:28Z

Try the following:

in aspx:

<asp:CheckBox ID="chkAll" onclick="javascript:CheckUncheckall(this);" Text="Select" runat="server" />
            <table id="tbl" runat="server">
                <tr>
                    <td>
                        <asp:CheckBox ID="CheckBox1" runat="server" Text="A" /></td>
                </tr>
                <tr>
                    <td>
                        <asp:CheckBox ID="CheckBox2" runat="server" Text="B" /></td>
                </tr>
                <tr>
                    <td>
                        <asp:CheckBox ID="CheckBox3" runat="server" Text="C" /></td>
                </tr>
                <tr>
                    <td>
                        <asp:CheckBox ID="CheckBox4" runat="server" Text="D" /></td>
                </tr>
                <tr>
                    <td>
                        <asp:CheckBox ID="CheckBox5" runat="server" Text="E" /></td>
                </tr>
            </table>

and the javascript below:

 <script language="javascript" type="text/javascript">
    function CheckUncheckall(chk) {
    var chks = document.getElementById("<% = tbl.ClientID %>").getElementsByTagName("input");
    for(var i=0; i<chks.length; i++) {
        if(chks[i].type == "checkbox") chks[i].checked= chk.checked;
    }
}
    </script>

Luca Matteis · Accepted Answer · 2009-10-09 10:38:33Z

0

I want to javascript check or uncheck all of the checkboxes in my table

<table id="goofy">...</table>

<a href="#" onclick="f(); return false;">Click me to check all boxes in table</a>

And JavaScript:

function f() {
    var inputs_in_table = document.getElementById("goofy").getElementsByTagName("input");
    for(var i=0; i<inputs_in_table.length; i++) {
        if(inputs_in_table[i].type == "checkbox") inputs_in_table[i].checked= true;
    }
}

answered Oct 9, 2009 at 10:38

Luca Matteis

29.3k22 gold badges116 silver badges172 bronze badges

Comments

2 revs · Accepted Answer · 2010-05-18 11:27:30Z

0

i have created a modified version using this script where you can pass table name and checkbox name dynamically. Click here to get more infomarion

function checkedAll(container,chkID)
{

var tab = document.getElementById ( container ); // get table  id  which contain check box
var elems = tab.getElementsByTagName ( “input” );

for ( var i = 0; i < elems.length; i++ )
{

if ( elems[i].type == “checkbox” )
{

if ( document.getElementById(chkID).checked ==true)

elems[i].checked = true;

else

elems[i].checked = false;
}

}

}

edited May 18, 2010 at 11:27

community wiki

2 revs
Amit pathak

Comments

RonnyKnoxville · Accepted Answer · 2015-02-05 13:47:54Z

0

You could save on looping elements here by using jquery to directly access checkboxes directly and then looping them.

$('input[type=checkbox]').each(function(){ 
    this.checked = true  
});

If you wanted to isolate a particular part of the page:

$(mydiv).find('input[type=checkbox]').each(function(){ 
    this.checked = true 
});

edited Feb 5, 2015 at 13:47

answered Feb 5, 2015 at 13:41

RonnyKnoxville

6,43410 gold badges50 silver badges80 bronze badges

Comments

rene · Accepted Answer · 2019-06-06 06:51:08Z

0

$('#checkall').click(
 function () {
   $('#divid').find('input[type=checkbox]').each(function () {
     this.checked = $('#checkall').is(':checked')
    });
});

In this, all checkboxes checked and unchecked by a single checkbox (checkall - id)

edited Jun 6, 2019 at 6:51

rene

42.6k78 gold badges122 silver badges166 bronze badges

answered Jun 6, 2019 at 6:45

Nitika Chopra

1,40519 silver badges25 bronze badges

Collectives™ on Stack Overflow

Javascript check all checkboxes in a table / asp.net

8 Answers 8

1 Comment

2 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

1 Comment

2 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related