Cómo recuperar valores de casillas de verificación en jQuery
¿Cómo usar jQuery para obtener los valores de las casillas marcadas y colocarlos en un área de texto inmediatamente?
Como 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 código , el siguiente código de altCognito no funciona. ¿Existe alguna buena solución?
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 después, se hizo otra pregunta sobre cómo mantener funcionando lo anterior si cambia la identificación. Bueno, la solución se reduce a mapear la función updateTextArea en algo genérico que use clases CSS y usar la función en vivo para monitorear el DOM en busca de esos cambios.
También puede devolver el valor de todas las casillas de verificación seleccionadas en una cadena separada por comas. Esto también te facilitará las cosas cuando lo envíes como parámetro a SQL.
Aquí hay un ejemplo que devuelve todos los valores de casillas de verificación seleccionadas 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>
Tu pregunta es bastante vaga pero creo que esto es lo que necesitas:
$(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 en él. Si desea que los valores de las casillas marcadas se coloquen en el área de texto (tal vez con una buena separación por comas) al cargar la página, sería tan simple como:
$(function() {
$('#c_b input[type="checkbox"]:checked').each(function() {
$('#t').append(', '+$(this).val());
});
});
Edición 2 Como lo ha hecho la gente, también puedes hacer esto para atajar el largo selector que escribí:
$('#c_b :checkbox:checked').each(function() {
$('#t').append(', '+$(this).val());
});
... Me olvidé por completo de ese atajo. ;)
Gracias altCognito, tu 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();
});
Lo siguiente puede resultar útil ya que llegué aquí buscando una solución ligeramente diferente. Mi secuencia de comandos 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 marcado.
