J'ai quelques champs de saisie de texte dans ma page et j'affiche leurs valeurs en utilisant JavaScript.
J'utilise la fonction .set("value" ;,"" ;)
pour modifier la valeur, ajouter un champ de case à cocher supplémentaire, et pour passer une valeur.
Ici, je veux vérifier que si value == 1
, alors cette case à cocher doit être cochée. Sinon, elle doit rester non cochée.
J'ai fait cela en utilisant deux divs, mais je ne me sens pas à l'aise avec cela, y a-t-il une autre solution ?
if(value == 1) {
$('#uncheck').hide();
$('#check').show();
} else{
$('#uncheck').show();
$('#check').hide();
}
Pour jQuery 1.6+ :
[.attr()][2] est déprécié pour les propriétés ; utilisez la nouvelle fonction [.prop()][3] à la place comme :
$('#myCheckbox').prop('checked', true); // Checks it
$('#myCheckbox').prop('checked', false); // Unchecks it
Pour jQuery < 1.6:
Pour cocher/décocher une case à cocher, il faut utiliser l'attribut checked
et le modifier. Avec jQuery, vous pouvez le faire :
$('#myCheckbox').attr('checked', true); // Checks it
$('#myCheckbox').attr('checked', false); // Unchecks it
Parce que vous savez, en HTML, ça ressemblerait à quelque chose comme :
<input type="checkbox" id="myCheckbox" checked="checked" /> <!-- Checked -->
<input type="checkbox" id="myCheckbox" /> <!-- Unchecked -->
Cependant, vous ne pouvez pas vous fier à la méthode .attr() pour obtenir la valeur de la case à cocher (si vous en avez besoin). Vous devrez faire confiance à la méthode [.prop()][1].
[1] : http://api.jquery.com/prop/ [2] : http://api.jquery.com/attr/ [3] : http://api.jquery.com/prop
Vous pouvez utiliser [prop()][1] pour cela, car Avant jQuery 1.6, la méthode [.attr()][2] prenait parfois en compte les valeurs des propriétés lors de la récupération de certains attributs, ce qui pouvait provoquer un comportement incohérent. À partir de jQuery 1.6, la méthode .prop()
permet de récupérer explicitement les valeurs des propriétés, tandis que .attr()
récupère les attributs.
var prop=false;
if(value == 1) {
prop=true;
}
$('#checkbox').prop('checked',prop);
ou simplement,
$('#checkbox').prop('checked',(value == 1));
[1] : http://api.jquery.com/prop [2] : http://api.jquery.com/attr
Snippet
$(document).ready(function() {
var chkbox = $('.customcheckbox');
$(".customvalue").keyup(function() {
chkbox.prop('checked', this.value==1);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h4>This is a domo to show check box is checked
if you enter value 1 else check box will be unchecked </h4>
Enter a value:
<input type="text" value="" class="customvalue">
<br>checkbox output :
<input type="checkbox" class="customcheckbox">