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" />
Rajeev
fuente
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í.

Andy Mikula
fuente
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')
xaxxon
fuente
90

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

Devuelve un valor booleano.

SimionBaws
fuente
56
// use ternary operators
$("#ans").is(':checked') ? 1 : 0;
Stefan Brinkmann
fuente
@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.

choque
fuente
18

Puedes probar esto:

$('#studentTypeCheck').is(":checked");
MAnoj Sarnaik
fuente
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í

alphakevin
fuente
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
nadie
fuente
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';
Rajesh RK
fuente
6

También puedes usar:

$("#ans:checked").length == 1;
Alnamrouti Fareed
fuente
4

Utilizar:

$("#ans option:selected").val()
Senthil Kumar Bhaskaran
fuente
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"));
kmoney12
fuente
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.

Robert
fuente
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.

Amit Maru
fuente
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);
sharif2008
fuente
2
 $("#id").prop('checked') === true ? 1 : 0;
Paulo Rodrigues
fuente
0

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

$("input[type='checkbox']").prop("checked");
$("input[type='checkbox']").is(":checked");
PPB
fuente
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

Ashok Charu
fuente
0

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

$("#ans:checked").length
Nasaralla
fuente
0

Puedes realizarlo de esta manera:

$('input[id=ans]').is(':checked');     
swathi
fuente