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.

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>

 

Artículos relacionados
¿Cómo crear un menú con CSS y HTML? Muy fácil y práctico
¿Cómo crear un menú con CSS y HTML? Muy fácil y práctico

En este artículo explicare cómo crear un menú

Como resaltar los resultados de búsqueda en un GridView
Como resaltar los resultados de búsqueda en un GridView

En una ocasión en mi trabajo me pidieron que u

Sistema de contol de inventarios con ASP.NET MVC Parte 1 (Diseño de la base de datos)
Sistema de contol de inventarios con ASP.NET MVC Parte 1 (Diseño de la base de datos)

Hola amigos, hoy les traemos una noticia estar

0 Comentarios
Enviame un comentario