Javascript check all checkboxes in a table / asp.net - 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

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

Answer 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

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

Answer 5

I want to javascript check or uncheck
all of the checkboxes in my table
<table id="goofy">...</table>
Click me to check all boxes in table
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 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;
}
}
}

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

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