Header Ads Widget

Ticker

6/recent/ticker-posts

¿Cómo encontrar todas las casillas de verificación marcadas en jQuery? Tutorial de ejemplo

 Hola chicos, supongan que tiene varias casillas de verificación en su página HTML y desea recuperar todas las casillas de verificación que están marcadas. ¿Cómo vas a hacer eso en jQuery? Bueno, puede usar el pseudo selector como : check para obtener todas las casillas de verificación marcadas. Este selector comprueba la checked propiedad de casilla de verificación y devuelve solo aquellas casillas de verificación que tienen esta propiedad. Por ejemplo, el siguiente selector de jQuery devolverá todas las casillas de verificación que están marcadas:

$ ('input [type = checkbox]: comprobado')

En esto, primero seleccionamos todos los elementos de entrada donde el tipo es una casilla de verificación y luego agregamos:  marcado para filtrar solo aquellos que están marcados.

Por otro lado, si solo usa:

$ ('entrada [tipo = casilla de verificación]')

Todas las casillas de verificación estarán seleccionadas, quiero decir, tanto marcadas como sin marcar. Recuerde, esto devuelve una matriz de elementos, por lo que debe usar la each()función jQuery si desea hacer algo con ellos, como imprimir su valor.

Ejemplo de jQuery para obtener todas las casillas de verificación marcadas en HTML

En este ejemplo, tengo una página HTML con tres casillas de verificación leer, escribir y hablar. Es posible que los haya visto en el portal de empleo donde preguntan sobre su dominio del idioma. De estas tres casillas de verificación, he leído, escrito marcado y hablado está desmarcado.

Para demostrar cómo usar el selector jQuery para obtener todas las casillas de verificación marcadas, he escrito un código en la $(document).ready()función. 

De todos modos, ese código selecciona todas las casillas de verificación marcadas después de que se carga la página e imprime su función idstatusmediante el uso de attr()val()He usado la
each()función para iterar sobre cada una de esas casillas marcadas.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<html><font></font>
 <font></font>
<head><font></font>
    <title>How to find all checked checkboxes in jQuery</title><font></font>
</head><font></font>
 <font></font>
<body><font></font>
 <font></font>
    <h2>Displaying all checked checkbox value in jQuery</h2><font></font>
 <font></font>
    Read: <input type="checkbox" id="read" checked="checked" /><font></font>
    Write: <input type="checkbox" id="write" checked="checked" /><font></font>
    Speak: <input type="checkbox" id="speak" /><font></font>
 <font></font>
    <div id="output"></div><font></font>
 <font></font>
    <script src="http://code.jquery.com/jquery-1.6.2.min.js"></script><font></font>
    <script><font></font>
        $(document).ready(function () {<font></font>
 <font></font>
            $('input[type=checkbox]:checked').each(function () {<font></font>
                var status = (this.checked ? $(this).val() : "");<font></font>
                var id = $(this).attr("id");<font></font>
                $('#output').append("<h3>" + id + " : " + status + "</h3>");<font></font>
            });<font></font>
        });<font></font>
 <font></font>
    </script><font></font>
 <font></font>
</body><font></font>
 <font></font>
</html><font></font>

Salida

Cuando abra este archivo HTML en un navegador o código de Visual Studio, verá que mostrará el ID de dos casillas de verificación marcadas que son "leer" y "escribir" en nuestro caso. Aquí está la captura de pantalla del navegador Microsoft Edge:

Eso es todo acerca de cómo obtener todas las casillas de verificación marcadas de una página en jQuery . Una vez que pueda encontrarlos, puede hacer lo que quiera, como imprimir sus valores, deshabilitarlos o borrar la selección. Solo recuerde usar el each()método, para que pueda iterar sobre cada casilla de verificación y realizar alguna acción.

Publicar un comentario

0 Comentarios