cocher / décocher une case à cocher en utilisant jquery ?

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&quot ;,"&quot ;) 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();
}
Aniket G
Question modifiée 11 mars 2019 в 11:51
Programmation
jquery jquery-ui
2 juillet 2013 в 8:09
14 vues
Solution

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" /> 
<input type="checkbox" id="myCheckbox" />

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

Christopher Taylor
Réponse modifiée 19 janvier 2018 в 9:14
Commentaires (16)

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">
Rohan Kumar
Réponse modifiée 31 janvier 2017 в 4:35
Commentaires (0)

Vous pouvez définir l'état de la case à cocher en fonction de la valeur :

$('#your-checkbox').prop('checked', value == 1);
Commentaires (1)