Select/Deselect all Items in asp.net Checkbox list using Jquery

ASP.NET, jQuery Comments Off on Select/Deselect all Items in asp.net Checkbox list using Jquery

The following snipped shows how to select/deselect all items – check/uncheck all items in asp.net CheckBoxList Control using jquery. I have omitted the page directive from example.


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Select/Deselect all Items in Checkbox list</title>
    <script src="https://code.jquery.com/jquery-1.11.3.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:CheckBoxList ID="CheckBoxList_Cities" runat="server">
                <asp:ListItem>Madras</asp:ListItem>
                <asp:ListItem>London</asp:ListItem>
                <asp:ListItem>New York</asp:ListItem>
                <asp:ListItem>Perth</asp:ListItem>
                <asp:ListItem>Moscow</asp:ListItem>
            </asp:CheckBoxList>
            <br />

            <input id="cbk_SelectAllCities" type="checkbox" /><label><em>Select All Cities</em></label>

            <script type="text/javascript">

                $(document).ready(function () {
                    $("#cbk_SelectAllCities").change(function () {
                        $("#<%=CheckBoxList_Cities.ClientID%> input").prop('checked', $(this).prop("checked"));
                            });

                            var a = $("#<%=CheckBoxList_Cities.ClientID%> input");
                            if (a.length == a.filter(":checked").length) {
                                $("#cbk_SelectAllCities").prop('checked', true);
                            }
                        });


            </script>
        </div>
    </form>
</body>
</html>


Author

Search

Back to Top