obtener - jquery checkbox checked value
Cómo recuperar los valores de las casillas de verificación en jQuery (16)
¿Cómo usar jQuery para obtener los valores de las casillas de verificación marcados y colocarlos en un área de texto inmediatamente?
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 Ajax actualiza el id="c_d" , el código de altCognito a continuación no funciona. ¿Hay alguna buena solución?
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 el área de texto).
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 usa clases CSS, y usar la función en vivo para monitorear el DOM para esos cambios.
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 marcada en la página e insertarlo 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.
Esto funciona perfectamente para mi:
alert($("input[name=chkboxName]:checked").map(function() {
return this.value;
}).get().join(","));
Gracias Mohamed ElSheikh
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();
});
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(","));
});
});
Lo siguiente puede ser útil ya que llegué buscando una solución ligeramente diferente. Mi script necesitaba pasar automáticamente por 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 se marca. Para todos los demás elementos, el valor se devuelve independientemente del estado verificado.
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);
Si desea insertar el valor de cualquier casilla de verificación inmediatamente, ya que se está marcando, esto debería funcionar para usted:
$(":checkbox").click(function(){
$("#id").text(this.value)
})
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());
}
});
});
Edit: Oh, está bien ... ahí tienes ... No tenías el HTML arriba. 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 de verificación marcados se pongan en el área de texto (quizás con una buena separación de coma) 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());
});
});
Edición 2 Como lo ha hecho la gente, también puede hacer esto para atajar el largo selector que escribí:
$(''#c_b :checkbox:checked'').each(function() {
$(''#t'').append('', ''+$(this).val());
});
... me olvidé totalmente de ese atajo. ;)
También puede devolver el valor de todas las casillas de verificación seleccionadas en una cadena separada por comas. Esto también lo hará más fácil para usted cuando lo envíe como un 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 de 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>
Una forma mucho más fácil y rápida 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 repiten en PHP while loop:
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, utilizando el código jQuery anterior, obtengo todos los valores de city_id y los devuelvo a la base de datos usando $ .get (...)
Esto ha hecho mi vida tan fácil ya que ahora el código es completamente dinámico. Para agregar más ciudades, todo lo que tengo que hacer es agregar más ciudades en mi base de datos, y no hay que preocuparse por PHP o jQuery.
$(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.
}
});
});
function updateTextArea() {
var allVals = $(''#c_b :checked'').map(function() {
return $(this).val();
}).get();
$(''#t'').val(allVals)
}
$(function() {
$(''#c_b input'').click(updateTextArea);
updateTextArea();
});
$("#t").text($("#cb").find(":checked").val())
<html>
<head>
<title>jQuery check / uncheck a check box example</title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
</head>
<body>
<h1>jQuery check / uncheck a check box example</h1>
<script type="text/javascript">
$(document).ready(function(){
$("#isCheck").click(function () {
alert($(''input:checkbox[name=checkme]'').is('':checked''));
});
$("#checkIt").click(function () {
$(''input:checkbox[name=checkme]'').attr(''checked'',true);
});
$("#UnCheckIt").click(function () {
$(''input:checkbox[name=checkme]'').attr(''checked'',false);
});
});
</script>
</head><body>
<input type="checkbox" name="checkme">Check Me</input>
<br/>
<br/>
<br/>
<input type=''button'' value=''Is Check'' id=''isCheck''>
<input type=''button'' value=''Check It'' id=''checkIt''>
<input type=''button'' value=''UnCheck It'' id=''UnCheckIt''>
</body>
</html>