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?

Answer 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

Answer 2

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

Answer 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.

Answer 4

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

Answer 5

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>

Answer 6

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

}

}