Javascript check all checkboxes in a tableasp.net - Stack Overflow

admin管理员组

文章数量:1201559

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?

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?

• asp.net
• javascript

Share Improve this question Follow asked Oct 9, 2009 at 10:31 NibblyPigNibblyPig 52.9k7575 gold badges217217 silver badges377377 bronze badges

Add a comment  | 

8 Answers 8

Sorted by: Reset to default 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

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.

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

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>

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

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

}

}

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

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

本文标签： Javascript check all checkboxes in a tableaspnetStack Overflow