Question

On my webpage, I have a CheckBoxList and a single checkbox. When I click on the check box, all the Check Boxes in the CheckBoxList should get checked. My CheckBoxList has to be under Bodycontent placeholder because that’s how the layout of webpage is, and I kept the script in the same placeholder.

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<script type="text/javascript">
            function select(ch) {
                var allcheckboxes = document.getElementById('<%=CheckBoxList1.ClientID %>').getElementsByTagName("input");
                for (i = 0; i < allcheckboxes.length; i++)
                    allcheckboxes[i].checked = ch.checked;
            }
        </script>

        <asp:CheckBoxList ID="CheckBoxList1" runat="server" 
            RepeatDirection="Horizontal" RepeatLayout="Flow">
            <asp:ListItem>Item A</asp:ListItem>
            <asp:ListItem>Item B</asp:ListItem>
            <asp:ListItem>Item C</asp:ListItem>
        </asp:CheckBoxList>

            <asp:CheckBox ID="allCheck" onclick="select(this)" runat="server" Text="Select all" />
                <br />
</asp:Content>

The above doesn’t do anything. On clikcing on the checkbox nothing happens! I have been stuck on this small issue from quite long and not able to do the same. Any suggestions what’s wrong?

Answer 1

change the name of your function to something else; it will work

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<script type="text/javascript">
            function select1(ch) {
                var allcheckboxes = document.getElementById('<%=CheckBoxList1.ClientID %>').getElementsByTagName("input");
                for (i = 0; i < allcheckboxes.length; i++)
                    allcheckboxes[i].checked = ch.checked;
            }
        </script>

        <asp:CheckBoxList ID="CheckBoxList1" runat="server" 
            RepeatDirection="Horizontal" RepeatLayout="Flow">
            <asp:ListItem>Item A</asp:ListItem>
            <asp:ListItem>Item B</asp:ListItem>
            <asp:ListItem>Item C</asp:ListItem>
        </asp:CheckBoxList>

            <asp:CheckBox ID="allCheck" onclick="select1(this)" runat="server" Text="Select all" />
                <br />
</asp:Content>