Test si une case est cochée avec jQuery


588

Si la case est cochée, je n'ai besoin que d'obtenir la valeur 1; sinon, je dois le mettre à 0. Comment faire cela en utilisant jQuery?

$("#ans").val() me donnera toujours un droit dans ce cas:

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

2
.val () consiste à obtenir l'attribut value, et non l'état de vérification. L'attribut value peut être n'importe quoi, il n'a pas besoin d'être booléen.
Pablo Pazos

si vous êtes toujours là, vous voudrez peut-être mettre à jour la réponse acceptée pour les logiciels modernes ... beaucoup de gens voient toujours cette question
xaxxon

Réponses:


1008

Utilisez .is(':checked')pour déterminer si elle est cochée ou non, puis définissez votre valeur en conséquence.

Plus d'informations ici.


1
De plus, lorsque vous faites $ ("# id"). Est ("vérifié") dans une clause if, vous obtiendrez true ou false, pas on / off, par retour et vous pouvez l'envoyer à votre script principal et faites ce que vous voulez.
Zanoldor

1
Cela n'a probablement plus d'importance de nos jours: ReSharper (je suppose) émet un avertissement " La pseudo-classe" cochée "n'est pas compatible avec Internet Explorer 8.0 ".
Uwe Keim

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

vous dira si elle est cochée. Vous pouvez également utiliser un deuxième paramètre true / false pour cocher / décocher la case.

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

Par commentaire, utilisez propplutôt que attrlorsque disponible. Par exemple:

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

90

Utilisez simplement $(selector).is(':checked')

Il renvoie une valeur booléenne.


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

@Loic pour définir sa valeur en utilisant la syntaxe ternaire laconique, par exemple:: a = ischecked? 1: 0

21

La réponse de Stefan Brinkmann est excellente, mais incomplète pour les débutants (ignore l'affectation des variables). Juste pour clarifier:

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

Cela fonctionne comme ceci:

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

Exemple:

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

Alertes «non»

Si cela est utile, veuillez voter pour la réponse de Stefan Brinkmann.



15

J'ai déjà rencontré le même problème, j'espère que cette solution peut vous aider. tout d'abord, ajoutez un attribut personnalisé à vos cases à cocher:

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

écrire une extension jQuery pour obtenir de la valeur:

$.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;
    }
};

utilisez le code pour obtenir la valeur de la case à cocher:

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

vous pouvez tester ici


10
... parce que jQuery est connue sous le nom de bibliothèque "plus il faut écrire moins"
myshadowself

longue histoire vous êtes allé trop loin JQUERY veut que le développeur écrive moins et fasse plus. un problème simple mérite une solution simple
ShapCyber

oui, d'accord, écrivez moins, faites plus. vous écrivez l'extension une fois, et pour le reste du temps, vous n'appelez que l'API $ (someradio) .realVal (), vous n'avez pas besoin d'écrire une extension plusieurs fois.
alphakevin

Vous n'avez même pas eu besoin d'écrire l'extension une seule fois, peu importe 'plusieurs fois'! 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') et il retourne vrai ou faux.

Dans votre fonction:

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


4

Utilisation:

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

si elle n'est pas sélectionnée, la première partie ne retournera rien, non?
xaxxon

@Senthil, OP ne demande pas à obtenir la valeur d'une case à cocher sélectionnée, plutôt return 1si elle est sélectionnée
Om Shankar

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

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

statusNum sera égal à 1 si la case est cochée et à 0 si ce n'est pas le cas.

EDIT: Vous pouvez également ajouter le DOM à la fonction.

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

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

4

J'ai récemment rencontré un cas dans lequel j'avais besoin de vérifier la valeur de la case à cocher lorsque l'utilisateur a cliqué sur le bouton. La seule manière appropriée de le faire est d’utiliserprop() attribut.

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

cela a fonctionné dans mon cas, peut-être que quelqu'un en aura besoin.

Lorsque je l'ai essayé, je l'ai .attr(':checked')renvoyé, checkedmais je voulais une valeur booléenne et une .val()valeur d'attribut value.


4

Il y a plusieurs options comme ...

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

Si toutes ces options renvoient true, vous pouvez définir la valeur avec précision.


Le premier devrait être (': vérifié'), ne fonctionne pas autrement.
Arie Livshin

2

Essaye ça

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

Ici, le drapeau est vrai s'il est vérifié sinon faux

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

Encore une fois, cela fera cheked

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


0

Vous pouvez obtenir de la valeur (vrai / faux) par ces deux méthodes

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

0

Vérifiez d'abord que la valeur est vérifiée

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

Sinon, définissez la valeur 0


0

Si vous voulez que la valeur entière soit cochée ou non, essayez:

$("#ans:checked").length

0

Vous pouvez l'exécuter de cette façon:

$('input[id=ans]').is(':checked');     
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.