I have a JS function to toggle check state for all the checkboxes in a gridview. Now, there are two similar gridviews and so, would like to use the same function.
This is Page structure:
Radiobutton rb1, RadioButton rb2
Gridview gv1, gridview gv2.
rb1 selected, shows only gv1 and hides gv2 and vice versa.
On page load, only rb1 is checked and gv1 is visble. The JS function works fine when used for just one gridview. I changed it to this and it doesnt work. Where am I going wrong.
JS: <script type="text/javascript">
function SelectAll(chkBox){
var chkAll = document.getElementById(chkBox);
var elements;
var g1 = document.getElementById('<%=gv1.ClientID%>');
var g2 = document.getElementById('<%=gv2.ClientID%>');
if(g1.style.visibility=='visible')
{
elements = document.getElementById('<%=gv1.ClientID%>')
.getElementsByTagName("INPUT");
}
else if(g2.style.visibility=='visible')
{
elements = document.getElementById('<%=gv2.ClientID%>')
.getElementsByTagName("INPUT");
}
for(var i=0;i<elements.length;i++){
var chk;
if(elements[i]!=null)
{
if(elements[i]!=null){
if(elements[i].id.indexof('chkLeaveType')>0){
chk=elements[i];
chk.checked = chkAll.checked;
}
}
}
}
</script>
ASPX:<asp:gridview id="gv1" runat="server">
<columns>
<asp:templatefield>
<headertemplate>
<asp:checkbox id="chkheader" runat="server" checked="true"
onclick="SelectAll(this.id)"/>Leave Type
</headertemplate>
<itemtemplate>
<asp:checkbox id="chkLeaveType" runat="server" checked="true"/>
</itemtemplate>
</asp:templatefield>
</columns>
</asp:gridview>
<asp:gridview id="gv2" runat="server">
<columns>
<asp:templatefield>
<headertemplate>
<asp:checkbox id="chkheader" runat="server" checked="true"
onclick="SelectAll(this.id)"/>Leave Type
</headertemplate>
<itemtemplate>
<asp:checkbox id="chkLeaveType" runat="server" checked="true"/>
</itemtemplate>
</asp:templatefield>
</columns>
</asp:gridview>