Cómo seleccionar todas las opciones de un CheckBoxList con jQuery

En este artículo vamos a explicar cómo seleccionar todas las casillas de un CheckBoxList, así mismo la desactivación de todas las opciones en ASP. NET utilizando jQuery.

El desmarque de todas las funciones se realiza mediante un CheckBox adicional que actuará como Seleccionar Todos o Deseleccionar las opciones del control CheckBoxList ASP.NET.

        <div>
            <asp:CheckBox ID="chkAll" Text="Select All" runat="server" />
            <asp:CheckBoxList ID="chkFruits" runat="server">
                <asp:ListItem Text="Mango" />
                <asp:ListItem Text="Apple" />
                <asp:ListItem Text="Banana" />
                <asp:ListItem Text="Pineapple" />
                <asp:ListItem Text="Guava" />
                <asp:ListItem Text="Grapes" />
                <asp:ListItem Text="Papaya" />
            </asp:CheckBoxList>

        </div>

El código HTML se compone de un CheckBox para desactivar todas las opciones (seleccionar/deseleccionar) y un control CheckBoxList que tendrá la lista de opciones a seleccionar.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("[id*=chkAll]").bind("click", function () {
                if ($(this).is(":checked")) {
                    $("[id*=chkFruits] input").attr("checked", "checked");
                } else {
                    $("[id*=chkFruits] input").removeAttr("checked");
                }
            });
            $("[id*=chkFruits] input").bind("click", function () {
                if ($("[id*=chkFruits] input:checked").length == $("[id*=chkFruits] input").length) {
                    $("[id*=chkAll]").attr("checked", "checked");
                } else {
                    $("[id*=chkAll]").removeAttr("checked");
                }
            });
        });
    </script>