Prueba si una casilla de verificación está marcada con jQuery


588

Si la casilla de verificación está marcada, entonces solo necesito obtener el valor como 1; de lo contrario, necesito obtenerlo como 0. ¿Cómo hago esto usando jQuery?

$("#ans").val() siempre me dará uno correcto en este caso:

<input type="checkbox" id="ans" value="1" />

2
.val () es para obtener el atributo de valor, no el estado de verificación. El atributo de valor puede ser cualquier cosa, no necesita ser booleano.
Pablo Pazos

si todavía está presente, es posible que desee actualizar la respuesta aceptada para el software moderno ... mucha gente todavía ve esta pregunta
xaxxon

Respuestas:


1008

Use .is(':checked')para determinar si está marcado o no, y luego configure su valor en consecuencia.

Más información aquí.


1
Además, cuando hace $ ("# id"). Está ("marcado") en una cláusula if, obtendrá verdadero o falso, no activado / desactivado, por retorno y puede enviarlo a su script de back-end y haz lo que quieras.
Zanoldor

1
Probablemente esto no importa hoy en día: ReSharper (supongo) genera una advertencia " La pseudoclase 'comprobada' no es compatible con Internet Explorer 8.0 ".
Uwe Keim

211
$("#ans").attr('checked') 

le dirá si está marcado. También puede usar un segundo parámetro verdadero / falso para marcar / desmarcar la casilla de verificación.

$("#ans").attr('checked', true);

Por comentario, use en proplugar de attrcuando esté disponible. P.ej:

$("#ans").prop('checked')

90

Solo usa $(selector).is(':checked')

Devuelve un valor booleano.


56
// use ternary operators
$("#ans").is(':checked') ? 1 : 0;

@Loic para establecer su valor utilizando la sintaxis ternaria concisa, p. Ej .:: a = ischecked? 1: 0

21

La respuesta de Stefan Brinkmann es excelente, pero incompleta para principiantes (omite la asignación variable). Solo para aclarar:

// this structure is called a ternary operator
var cbAns = ( $("#ans").is(':checked') ) ? 1 : 0;

Funciona así:

 var myVar = ( if test goes here ) ? 'ans if yes' : 'ans if no' ;

Ejemplo:

var myMath = ( 1 > 2 ) ? 'yes' : 'no' ;
alert( myMath );

Alertas 'no'

Si esto es útil, por favor vota la respuesta de Stefan Brinkmann.



15

He encontrado el mismo problema antes, espero que esta solución pueda ayudarte. primero, agregue un atributo personalizado a sus casillas de verificación:

<input type="checkbox" id="ans" value="1" data-unchecked="0" />

escriba una extensión jQuery para obtener valor:

$.fn.realVal = function(){
    var $obj = $(this);
    var val = $obj.val();
    var type = $obj.attr('type');
    if (type && type==='checkbox') {
        var un_val = $obj.attr('data-unchecked');
        if (typeof un_val==='undefined') un_val = '';
        return $obj.prop('checked') ? val : un_val;
    } else {
        return val;
    }
};

use el código para obtener el valor de la casilla de verificación:

$('#ans').realVal();

puedes probar aquí


10
... porque jQuery es conocida como la biblioteca "escribe más, haz menos"
myshadowself

larga historia que has llegado hasta ahora JQUERY quiere que el desarrollador escriba menos y haga más. problema simple merece una solución simple
ShapCyber ​​01 de

sí, de acuerdo, escribe menos, haz más. escribe la extensión una vez, y durante el resto del tiempo, solo llama a la API $ (someradio) .realVal (), no necesita escribir una extensión muchas veces.
alphakevin

¡Ni siquiera necesitaba escribir la extensión una vez, no importa 'muchas veces'! Oo
Coz

8
$('input:checkbox:checked').val();        // get the value from a checked checkbox

7
<input type="checkbox" id="ans" value="1" />

Jquery: var test= $("#ans").is(':checked') y devuelve verdadero o falso.

En tu función:

$test =($request->get ( 'test' )== "true")? '1' : '0';


4

Utilizar:

$("#ans option:selected").val()

Si no está seleccionado, entonces la primera parte no devolvería nada, ¿verdad?
xaxxon

@Senthil, OP no solicita obtener el valor de una casilla de verificación seleccionada, sino return 1si está seleccionada
Om Shankar

4
function chkb(bool){
if(bool)
return 1;
return 0;
}

var statusNum=chkb($("#ans").is(':checked'));

statusNum será igual a 1 si la casilla de verificación está marcada y 0 si no lo está.

EDITAR: También puede agregar el DOM a la función.

function chkb(el){
if(el.is(':checked'))
return 1;
return 0;
}

var statusNum=chkb($("#ans"));

4

Recientemente me encontré con un caso en el que necesitaba verificar el valor de la casilla de verificación cuando el usuario hizo clic en el botón. La única forma correcta de hacerlo es usar el prop()atributo.

var ansValue = $("#ans").prop('checked') ? $("#ans").val() : 0;

esto funcionó en mi caso, tal vez alguien lo necesite.

Cuando lo intenté .attr(':checked'), devolvió checkedpero quería un valor booleano y .val()devolví el valor del atributo value.


4

Hay varias opciones, como ...

 1. $("#ans").is(':checked') 
 2. $("#ans:checked")
 3. $('input:checkbox:checked'); 

Si todas estas opciones devuelven verdadero, puede establecer un valor acorde.


El primero debe ser (': marcado'), no funciona de otra manera.
Arie Livshin

2

Prueba esto

$('input:checkbox:checked').click(function(){
    var val=(this).val(); // it will get value from checked checkbox;
})

Aquí la marca es verdadera si se marca de otra manera falsa

var flag=$('#ans').attr('checked');

De nuevo, esto hará cheked

$('#ans').attr('checked',true);


0

Puede obtener valor (verdadero / falso) por estos dos métodos

$("input[type='checkbox']").prop("checked");
$("input[type='checkbox']").is(":checked");

0

Primero verifique que el valor esté marcado

$("#ans").find("checkbox").each(function(){
    if ($(this).prop('checked')==true){ 
    var id = $(this).val()
    }
});

De lo contrario, establezca el valor 0


0

Si desea un valor entero de marcado o no, intente:

$("#ans:checked").length

0

Puedes realizarlo de esta manera:

$('input[id=ans]').is(':checked');     
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.