Question

I hava a datalist in side that I have checkbox

<asp:DataList ID="dlst1" runat="server" RepeatDirection="Horizontal" OnItemDataBound="dlst1_ItemDataBound" CaptionAlign="Left">
 <ItemTemplate>
       <asp:ImageButton ID="btnImage" runat="server" />

        <asp:Label ID="lbl" runat="server"/>

       <asp:CheckBox ID="Chkbox" runat="server"  TextAlign="Right" />
  </ItemTemplate>
</asp:DataList>

I have 2 button

I want to check all the check box when user click on Check All btn, and Uncheck All checkbox when user click on Uncheck All btn, I don’t want any post back, how to do it in client side.

I am trying

 function CheckOrUncheckAll(isChecked) {
     var dataList = document.getElementById('<%= DataList.ClientID %>');
     for (var index = 0; index < dataList.rows.length; index++) {
         for (var cIndex = 0; cIndex < dataList.rows[index].cells.length; cIndex++) {
             dataList.rows[index].cells[cIndex].childNodes[3].checked = isChecked;
                            }
                    }
                    return false;
            }

    <asp:Button ID="btnCheckAll" runat="server" Text="Check All" OnClientClick="return CheckOrUncheckAll(true)" />
    <asp:Button ID="btnUnCheckAll" runat="server" Text="Uncheck All" OnClientClick="return CheckOrUncheckAll(false)" />

its working fine but I don’t want to use childNodes[3], because in future in in datalist something got added then I need to change the index.. any jquery to change this function

Answer 1

I think, you must use jQuery.

To check:

$("#<%=btnCheckAll.ClientID %>").click(function() {
     $("#<%= dlst1.ClientID %> input:checkbox").attr("checked", "checked");
  });

To uncheck:

$("#<%=btnUnCheckAll.ClientID %>").click(function() {
     $("#<%= dlst1.ClientID %> input:checkbox").removeAttr("checked");
  });