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

Estrada Web Group
Administrador
Cómo seleccionar todas las opciones de un CheckBoxList con jQuery

jquery ajax

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.

HTML

        <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.

Javascript

<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>

 

Compartir artículo:

Más artículos geniales

Manténgase actualizado

Obtenga excelente contenido en su bandeja de entrada todas las semanas.
Solo contenido excelente, no compartimos su correo electrónico con terceros.
Subir al inicio de la pantalla ;