web-dev-qa-db-fra.com

cocher / décocher la case à l'aide de jQuery?

J'ai quelques champs de texte de saisie dans ma page et 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 transmettre une valeur.

Ici, je veux vérifier que si value == 1, alors cette case doit être cochée. Sinon, il devrait rester non vérifié.

Je l'ai fait 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();
}
jqueryjquery-ui
567
Irfan Ahmed

Pour jQuery 1.6+:

. attr () est obsolète pour les propriétés; utilisez plutôt la nouvelle fonction . prop () en tant que:

$('#myCheckbox').prop('checked', true); // Checks it
$('#myCheckbox').prop('checked', false); // Unchecks it

Pour jQuery <1.6:

Pour cocher/décocher une case à cocher, utilisez l'attribut checked et modifiez-le. Avec jQuery, vous pouvez faire:

$('#myCheckbox').attr('checked', true); // Checks it
$('#myCheckbox').attr('checked', false); // Unchecks it

Parce que vous savez, en HTML, cela ressemblerait à quelque chose comme:

<input type="checkbox" id="myCheckbox" checked="checked" /> <!-- Checked -->
<input type="checkbox" id="myCheckbox" /> <!-- Unchecked -->

Cependant, vous ne pouvez pas faire confiance à la méthode .attr () pour obtenir la valeur de la case à cocher (si vous en avez besoin). Vous devrez utiliser la méthode . Prop () .

1193
Eric

Vous pouvez utiliser prop () pour cela, comme Avant jQuery 1.6 , le . Attr () = La méthode prend parfois en compte les valeurs de propriété lors de la récupération de certains attributs, ce qui peut entraîner un comportement incohérent. À partir de jQuery 1.6 , la méthode .prop() fournit un moyen d'extraire 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));

Extrait 

$(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">
62
Rohan Kumar

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

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