¿Cómo obtener todas las casillas de verificación seleccionadas en una array usando jQuery?

Posted on by Rudeus Greyrat

Dado un número de casillas de verificación. La tarea es obtener el valor de todas las casillas de verificación seleccionadas en la array usando JQuery. Algunos de los métodos se discuten a continuación:

  • Método jQuery on()
    Este método agrega uno o más controladores de eventos para los elementos seleccionados y los elementos secundarios.
    Sintaxis: 
    $(selector).on(event, childSel, data, fun, map)

    Parámetros:

    • evento: Este parámetro es obligatorio. Especifica uno o más eventos o espacios de nombres para agregar a los elementos seleccionados.
      Si hay varios valores de eventos, sepárelos por espacios. El evento debe ser válido.
    • childSel: Este parámetro es opcional. Especifica que el controlador de eventos solo debe adjuntarse a los elementos secundarios definidos.
    • datos: Este parámetro es opcional. Especifica datos adicionales para pasar a la función.
    • diversión: este parámetro es obligatorio. Especifica la función que se ejecutará cuando ocurra el evento.
    • map: especifica un mapa de eventos ({event:func(), event:func(), …}) que tiene uno o más eventos para agregar a los elementos seleccionados y funciones para ejecutar cuando ocurren los eventos.
  • Método jQuery text()
    Este método establece/devuelve el contenido de texto de los elementos seleccionados.
    Si se utiliza este método para devolver contenido, proporciona el contenido de texto de todos los elementos coincidentes (se eliminarán las etiquetas HTML).
    Si este método se usa para configurar el contenido, reemplaza el contenido de TODOS los elementos coincidentes.
    Sintaxis:
    • Devolver contenido de texto: 
      $(selector).text()
    • Establecer contenido de texto: 
      $(selector).text(content)
    • Establecer contenido de texto usando una función: 
      $(selector).text(function(index, curContent))

    Parámetros:

    • contenido: Este parámetro es obligatorio. Especifica el nuevo contenido de texto para los elementos seleccionados.
    • function(index, curContent): Este parámetro es opcional. Especifica una función que devuelve el nuevo contenido de texto para los elementos seleccionados.
      • index: Devuelve la posición del índice del elemento en el conjunto.
      • curContent: Devuelve el contenido actual de los elementos seleccionados.
  • Método jQuery val()
    Este método devuelve/establece el atributo de valor de los elementos coincidentes.
    En caso de valor devuelto, este método devuelve el valor del atributo de valor del PRIMER elemento seleccionado.
    En caso de valor establecido, este método establece el valor del atributo de valor para TODOS los elementos seleccionados.
    Sintaxis:
    • Devuelve el atributo de valor: 
      $(selector).val()
    • Establezca el atributo de valor: 
      $(selector).val(value)
    • Establezca el atributo de valor usando una función: 
      $(selector).val(function(index, cValue))

    Parámetros:

    • valor: Este parámetro es obligatorio. Especifica el valor del atributo de valor.
    • function(index, cValue): Este parámetro es opcional. Especifica una función que devuelve el valor a establecer.
      • índice: Devuelve el índice del elemento del conjunto.
      • cValue: Devuelve el atributo de valor actual de los elementos seleccionados.
  • Método JavaScript Array push()
    Este método agrega nuevos elementos al final de la array y devuelve la nueva longitud.
    Sintaxis: 
    array.push(item1, item2, ..., itemN)

    Parámetros:

    • item1, item2, …, itemN: Este parámetro es obligatorio. Especifica los elementos que se agregarán a la array.

    Valor devuelto:
    Devuelve un número, que representa la nueva longitud de la array.

Ejemplo 1: este ejemplo selecciona las casillas de verificación marcadas por un selector y luego llama al método .each() para cada elemento y finalmente los inserta en la array.

<!DOCTYPE html>
<html>
  
<head>
    <title>
        JQuery | Get all selected checkboxes in an array.
    </title>
    <style>
        #GFG_UP {
            font-size: 17px;
            font-weight: bold;
        }
          
        #GFG_DOWN {
            color: green;
            font-size: 24px;
            font-weight: bold;
        }
          
        button {
            margin-top: 20px;
        }
    </style>
</head>
<script src=
    "https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
  
<body style="text-align:center;" id="body">
    <h1 style="color:green;">  
            GeeksforGeeks  
        </h1>
    <p id="GFG_UP">
    </p>
      
    <input type="checkbox" name="type" value="GFG" /> GFG:
    <input type="checkbox" name="type" value="Geeks" /> Geeks:
    <input type="checkbox" name="type" value="Geek" /> Geek:
    <input type="checkbox" name="type" value="portal" /> portal:
    <br>
    <button>
        click here
    </button>
    <p id="GFG_DOWN">
    </p>
    <script>
        $('#GFG_UP')
        .text('First check few elements then click on the button.');
        $('button').on('click', function() {
            var array = [];
            $("input:checkbox[name=type]:checked").each(function() {
                array.push($(this).val());
            });
            $('#GFG_DOWN').text(array);
        });
    </script>
</body>
  
</html>

Producción:

  • Antes de hacer clic en el botón:
  • Después de hacer clic en el botón:

Ejemplo 2: Este ejemplo también hace el mismo trabajo pero con un enfoque diferente. Este ejemplo selecciona las casillas de verificación marcadas por un selector (diferente del anterior) y luego llama al método .each() para cada elemento y finalmente los inserta en la array.

<!DOCTYPE html>
<html>
  
<head>
    <title>
        JQuery | Get all selected checkboxes in an array.
    </title>
    <style>
        #GFG_UP {
            font-size: 17px;
            font-weight: bold;
        }
          
        #GFG_DOWN {
            color: green;
            font-size: 24px;
            font-weight: bold;
        }
          
        button {
            margin-top: 20px;
        }
    </style>
</head>
<script src=
     "https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
  
<body style="text-align:center;" id="body">
    <h1 style="color:green;">  
            GeeksforGeeks  
        </h1>
    <p id="GFG_UP">
    </p>
      
    <input type="checkbox" name="type" value="GFG" /> GFG:
    <input type="checkbox" name="type" value="Geeks" /> Geeks:
    <input type="checkbox" name="type" value="Geek" /> Geek:
    <input type="checkbox" name="type" value="portal" />portal:
    <br>
    <button>
        click here
    </button>
    <p id="GFG_DOWN">
    </p>
    <script>
        $('#GFG_UP')
        .text('First check few elements then click on the button.');
        $('button').on('click', function() {
            var array = [];
            $("input:checked").each(function() {
                array.push($(this).val());
            });
            $('#GFG_DOWN').text(array);
        });
    </script>
</body>
  
</html>

Producción:

  • Antes de hacer clic en el botón:
  • Después de hacer clic en el botón:

jQuery es una biblioteca JavaScript de código abierto que simplifica las interacciones entre un documento HTML/CSS. Es muy famosa por su filosofía de «Escribir menos, hacer más» .
Puede aprender jQuery desde cero siguiendo este tutorial de jQuery y ejemplos de jQuery .

Publicación traducida automáticamente

Artículo escrito por PranchalKatiyar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *