Javascript check all checkboxes in a table / asp.net

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?

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

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

Method 2

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.

Method 3

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

Method 4

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>

Method 5

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

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

<a href="#" rel="nofollow noreferrer noopener" 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;
    }
}

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

}

}

Method 7

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

Method 8

$('#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)

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0