Sunday, January 31, 2010

Check / Unheck all checkboxes of HTML Table

Lets we have a HTML Table whose id=tblemail and it contain many rows and every row contains a check box.. and this HTML table contains check box in its header.. so when i click on checkbox of header then all checkboxes of rows of that table should be checked/ unchecked according to check box in header...

< table id="tblemail" border="1" style="text-align: left" width="80%" class="border" >
< tr >
< th >
Select Your choices
< /th >
< th >
< asp:CheckBox ID="cbSelectAll" runat="server" / >
< /th >
< /tr >
< tr >
< td >
I want to send message
< /td >
< td >
< asp:CheckBox ID="chkmsg" runat="server" / >
< /td >
< /tr >
< tr >
< td >
i want to receive message
< /td >
< td >
< asp:CheckBox ID="chkrcvmsg" runat="server" / >
< /td >
< /tr >

< /table >




below is java script function code to check/uncheck all checkboxes of a HTML table:
< script language="javascript" type="text/javascript" >

function SelectAll(id) {

var frm = document.getElementById('tblemail').getElementsByTagName("input");
var len = frm.length;

for (i=0;i< len;i++)
{
if (frm[i].type == "checkbox")
{
frm[i].checked = document.getElementById(id).checked;
}
}


}

< /script >



add below line in page_load so that it will add click event to selectall check box:
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

If (Not IsPostBack) Then
cbSelectAll.Attributes.Add("onclick", "javascript:SelectAll('" & cbSelectAll.ClientID & "')")
end if
end sub

Share This!


No comments:

Powered By Blogger · Designed By Seo Blogger Templates