Cómo recuperar valores de casillas de verificación en jQuery

240

¿Cómo usar jQuery para obtener los valores de las casillas marcadas y ponerlo en un área de texto de inmediato?

Al igual que este código:

<html>
  <head>
  </head>

  <body>
    <div id="c_b">
      <input type="checkbox" value="one_name" checked>
      <input type="checkbox" value="one_name1">
      <input type="checkbox" value="one_name2">
    </div>  

    <textarea id="t"></textarea>
  </body>
</html>

Si Ajaxid="c_d" actualiza el , el siguiente código de altCognito no funciona. ¿Hay alguna buena solución?

jquery html checkbox lanqy
fuente

querías todo o uno a la vez?

TStamper

¿Cómo podemos 'marcar' la casilla con un valor / etiqueta dada? decir "one_name2"?

Amitd el

55

@Amitd use $ ("input [name = one_name2]"). Attr ('marcado', verdadero);

Mark Schultheiss

gracias que funcionó muy bien ... incluso para el tipo de radio. 1 voto para arriba :)

Amitd

320

Aquí hay uno que funciona ( ver el ejemplo ):

 function updateTextArea() {         
     var allVals = [];
     $('#c_b :checked').each(function() {
       allVals.push($(this).val());
     });
     $('#t').val(allVals);
  }
 $(function() {
   $('#c_b input').click(updateTextArea);
   updateTextArea();
 });

Actualizar

Algunos meses más tarde se hizo otra pregunta con respecto a cómo mantener el funcionamiento anterior si cambia la identificación. Bueno, la solución se reduce a mapear la función updateTextArea en algo genérico que usa clases CSS, y usar la función en vivo para monitorear el DOM en busca de esos cambios.

cgp
fuente

2

Ah ja! Excelente. Has tenido en cuenta ambos escenarios probables. Buen trabajo señor. ;)

KyleFarris

¿Cómo podemos 'marcar' la casilla con un valor / etiqueta dada? decir "one_name2"?

Amitd el

66

Me gusta usar map para cosas como esta: $ (': chequeado', '#c_b'). Map (function (i, cb) {return cb.value}) .get (). Además, esto es solo una preferencia personal, pero separaría obtener los valores de cambiar las áreas de texto, algo así como: $ (function () {$ ('# c_b input'). Click ($ ('# t'). Val ($ (': marcado', '#c_b'). map (function (i, cb) {return cb.value}) .get ())); $ ('# c_b input: first'). triggerHandler (' haga clic en ');});

Brandon

utilizar $(document).on("click", "#c_b input", updateTextArea); en lugar para solucionar problemas ajax'y.

Goldentoa11

1

no estoy seguro si esto es solo en IE (11), pero ¿no debería serlo $('#c_b:checked')(énfasis en el espacio)?

AceMark

124

También puede devolver todos los valores de casillas de verificación seleccionados en una cadena separada por comas. Esto también lo hará más fácil cuando lo envíe como parámetro a SQL

Aquí hay una muestra que devuelve todos los valores seleccionados de las casillas de verificación que tienen el nombre "chkboxName" en una cadena separada por comas

Y aquí está el javascript

function showSelectedValues()
{
  alert($("input[name=chkboxName]:checked").map(
     function () {return this.value;}).get().join(","));
}

Aquí está la muestra HTML

<html>
  <head>
 </head>
 <body>
  <div>
   <input name="chkboxName" type="checkbox" value="one_name" checked>
   <input name="chkboxName" type="checkbox" value="one_name1">
   <input name="chkboxName" type="checkbox" value="one_name2">
  </div>  
 </body>
 </html>

Mohamed ElSheikh
fuente

Me topé con esto mientras buscaba una forma de obtener todos los valores de las casillas de verificación marcadas de un nombre de pila y me funciona con dos pequeños problemas. 1) cada vez que marque una casilla que no sea la primera, alterna la marca de verificación en la primera. 2) Cuando intento configurar esto en una matriz para poder acceder a la información más tarde, se bloquea.

Reverendo Bubbles

3

Esta es honestamente la mejor respuesta. Muy simple. Quitaría la "función" y la "alerta", ya que eso confunde a algunas personas, pero el código es simple, está bien hecho.

tmarois

showSelectedValues también funciona para decodificar grupos de botones de radio que tienen el mismo nombre

Matthew Lock

65

Su pregunta es bastante vaga, pero creo que esto es lo que necesita:

$(function() { 
    $('input[type="checkbox"]').bind('click',function() {
        if($(this).is(':checked')) {
            $('#some_textarea').html($(this).val());
         }
   });
});

Editar: Oh, está bien ... ahí lo tienes ... No tenías el HTML activado antes. De todos modos, sí, pensé que querías poner el valor en un área de texto cuando se hace clic. Si desea que los valores de las casillas marcadas se coloquen en el área de texto (tal vez con una buena separación de comas) en la carga de la página, sería tan simple como:

$(function() { 
    $('#c_b input[type="checkbox"]:checked').each(function() { 
        $('#t').append(', '+$(this).val());
    });
});

Editar 2 Como lo ha hecho la gente, también puede hacer esto para atajar el extenso selector que escribí:

$('#c_b :checkbox:checked').each(function() {
    $('#t').append(', '+$(this).val());
});

... Me olvidé por completo de ese atajo. ;)

KyleFarris
fuente

50

Esto funciona perfectamente para mi:

alert($("input[name=chkboxName]:checked").map(function() {
    return this.value;
}).get().join(","));

Gracias Mohamed ElSheikh

Nic
fuente

1

hombre genial ... este es el único que funcionó para mi bucle ajax;) gracias

Sagive SEO

77

también puede $ ('input [nombre = selección]: marcado'). map (function () {return this.value;}). toArray ()

ygaradon

8

Gracias altCognito, su solución ayudó. También podemos hacer esto usando el nombre de las casillas de verificación:

function updateTextArea() {         
   var allVals = [];
   $('[name=chkbox]:checked').each(function() {
      allVals.push($(this).val());
   });
   $('#t').val(allVals)
} 
$(function() { 
    $('#c_b input').click(updateTextArea);
    updateTextArea();
});

Harpreet Bhatia
fuente

6

Lo siguiente puede ser útil ya que llegué aquí buscando una solución ligeramente diferente. Mi script necesitaba recorrer automáticamente los elementos de entrada y tenía que devolver sus valores (para la función jQuery.post ()), el problema era que las casillas de verificación devolvían sus valores independientemente del estado marcado. Esta fue mi solución:

jQuery.fn.input_val = function(){

    if(jQuery(this).is("input[type=checkbox]")) {
        if(jQuery(this).is(":checked")) {
            return jQuery(this).val();
        } else {
            return false;
        }
    } else {
        return jQuery(this).val();
    }
};

Uso:

jQuery(".element").input_val();

Si el campo de entrada dado es una casilla de verificación, la función input_val solo devuelve un valor si está marcada. Para todos los demás elementos, el valor se devuelve independientemente del estado verificado.

Andy
fuente

realmente funciona bien, muchas gracias ... Acabo de cambiar el "return jQuery (this) .val ();" para "volver verdadero"; porque es una casilla de verificación en mi caso, solo necesito saber si está marcada o no ... ¡gracias!

TCB13

5

Aquí hay una alternativa en caso de que necesite guardar el valor en una variable:

var _t = $('#c_b :checkbox:checked').map(function() {
    return $(this).val();
});
$('#t').append(_t.join(','));

(map () devuelve una matriz, que me parece más útil que el texto en textarea).

pgcd
fuente

3

   $(document).ready(function() {
        $(':checkbox').click(function(){
           var cObj = $(this);
           var cVal = cObj.val();
           var tObj = $('#t');
           var tVal = tObj.val();
           if( cObj.attr("checked")) {
              tVal = tVal + "," + cVal; 
              $('#t').attr("value", tVal);
           } else {
              //TODO remove unchecked value.
           }
        });
    });

fuente

1

Lo has complicado demasiado. Además, generalmente no establece el valor de un área de texto con el parámetro de valor: el valor de un cuadro de texto es innerHTML. Y si tuviera que establecer el valor de algún elemento, normalmente es mejor usar el método 'val ()' para fines de abstracción del navegador.

KyleFarris

3

 function updateTextArea() {         
     var allVals = $('#c_b :checked').map(function() {
       return $(this).val();
     }).get();
     $('#t').val(allVals)
  }
 $(function() {
   $('#c_b input').click(updateTextArea);
   updateTextArea();
 });

satoru
fuente

2

$("#t").text($("#cb").find(":checked").val())

mkoryak
fuente

1

Se pueden marcar varias casillas de verificación a la vez.

KyleFarris el

2

De todos modos, probablemente necesites algo como esto:

 var val = $('#c_b :checkbox').is(':checked').val();
 $('#t').val( val );

Esto obtendrá el valor de la primera casilla de verificación marcada en la página y la insertará en el área de texto con id='textarea'.

Tenga en cuenta que en su código de ejemplo debe colocar las casillas de verificación en un formulario.

Pim Jager
fuente

2

Esto es incorrecto, isdevuelve un valor booleano, un valor booleano no tiene valmétodo.

indefinido

2

Una forma mucho más fácil y abreviada que estoy usando para lograr lo mismo, usando la respuesta de otra publicación, es así:

var checkedCities = $('input[name=city]:checked').map(function() {
    return this.value;
}).get();

Originalmente, las ciudades se recuperan de una base de datos MySQL y se enlazan en PHP mientras se repite:

while ($data = mysql_fetch_assoc($all_cities)) {
<input class="city" name="city" id="<?php echo $data['city_name']; ?>" type="checkbox" value="<?php echo $data['city_id']; ?>" /><?php echo $data['city_name']; ?><br />
<?php } ?>

Ahora, usando el código jQuery anterior, obtengo todos los valores city_id y los envío a la base de datos usando $ .get (...)

Esto me ha facilitado la vida desde que el código es completamente dinámico. Para agregar más ciudades, todo lo que necesito hacer es agregar más ciudades en mi base de datos, y no tener que preocuparme por PHP o jQuery end.

zeeshan
fuente

0

He tenido un problema similar y así es como lo resolví usando los ejemplos anteriores:

 $(".ms-drop").click(function () {
        $(function showSelectedValues() {
            alert($(".ms-drop input[type=checkbox]:checked").map(
               function () { return this.value; }).get().join(","));
        });
    });

sam
fuente

0

Prueba este ...

var listCheck = [];
console.log($("input[name='YourCheckBokName[]']"));
$("input[name='YourCheckBokName[]']:checked").each(function() {
     console.log($(this).val());
     listCheck .push($(this).val());
});
console.log(listCheck);

sonida
fuente

0

Si desea insertar el valor de cualquier casilla de verificación inmediatamente mientras se marca, esto debería funcionar para usted:

$(":checkbox").click(function(){
  $("#id").text(this.value)
})

duckyflip
fuente

No da cuenta de múltiples valores y casillas de verificación desmarcar

Rob

Cómo recuperar valores de casillas de verificación en jQuery

Respuestas:

Actualizar