web-dev-qa-db-fra.com

jQuery: Test si la case à cocher n'est pas cochée

J'ai du mal à comprendre cela. J'ai deux cases à cocher (à l'avenir, il y en aura plus):

  • checkSurfaceEnvironment-1
  • checkSurfaceEnvironment-2

En gros, je veux écrire une instruction if et tester si l’une d’elles est cochée et une autre non vérifiée. Quel est le moyen le plus simple d'accomplir les tâches suivantes:

if ( $("#checkSurfaceEnvironment-1").attr('checked', true) &&
     $("#checkSurfaceEnvironment-2").is('**(NOT??)** :checked') ) {
        // do something
}
jqueryif-statement
93
user1040259

Un moyen fiable que j'utilise est:

if($("#checkSurfaceEnvironment-1").prop('checked') == true){
    //do something
}

Si vous souhaitez parcourir les éléments cochés, utilisez l'élément parent

$("#parentId").find("checkbox").each(function(){
    if ($(this).prop('checked')==true){ 
        //do something
    }
});

Plus d'informations:

Cela fonctionne bien car toutes les cases à cocher ont une propriété cochée qui stocke l'état actuel de la case à cocher. Si vous le souhaitez, vous pouvez inspecter la page et essayer de cocher et décocher une case à cocher et vous remarquerez que l'attribut "coché" (si présent) restera le même. Cet attribut représente uniquement l'état initial de la case à cocher, et non l'état current. L'état actuel est stocké dans la propriété cochée de l'élément dom pour cette case à cocher.

Voir Propriétés et attributs en HTML

184
Pablo Mescher
if (!$("#checkSurfaceEnvironment-1").is(":checked")) {
    // do something if the checkbox is NOT checked
}
69
shweta

Vous pouvez également utiliser la méthode jQuery .not() ou :not() selector:

if ($('#checkSurfaceEnvironment').not(':checked').length) {
    // do stuff for not selected
}

Exemple JSFiddle

Notes complémentaires

Dans la documentation de l'API jQuery pour la :not()sélecteur:

Le .not () _ ​​méthode finira par vous fournir plus lisible sélections que de pousser des sélecteurs complexes ou des variables dans un : not ()sélecteur filtre. Dans la plupart des cas, c'est un meilleur choix. 

28
Aneesh Vijendran

Une autre manière:

Voici un exemple travail et voici le code, vous devriez également utiliser prop.

$('input[type="checkbox"]').mouseenter(function() { 
    if ($(this).is(':checked')) {
        //$(this).prop('checked',false);
        alert("is checked");
    } else {
         //$(this).prop('checked',true);
        alert("not checked");
    }
});​

J'ai commenté le moyen de basculer l'attribut vérifié.

21
Trufa
if ( $("#checkSurfaceEnvironment-1").is(":checked") && $("#checkSurfaceEnvironment-2").not(":checked") )
8
Zoltan Toth

Je recherchais une implémentation plus directe comme suggéré par avijendr.

J'ai eu un peu de mal avec sa syntaxe, mais ça a marché:

if ($('.user-forms input[id*="chkPrint"]:not(:checked)').length > 0)

Dans mon cas, j'avais une table avec une classe user-forms et je vérifiais si l'une des cases à cocher contenant la chaîne checkPrint dans leur id était décochée.

5
MsGirlPerl

Le faire avec .attr() comme vous l’aurez, pour voir s’il est coché, ce serait .attr("checked", "checked"), et si ce n’est pas le cas, ce serait .attr("checked") == undefined

3
jezza-tan

Ici, j'ai un extrait pour cette question.

$(function(){
   $("#buttoncheck").click(function(){
        if($('[type="checkbox"]').is(":checked")){
            $('.checkboxStatus').html("Congratulations! "+$('[type="checkbox"]:checked').length+" checkbox checked");
        }else{
            $('.checkboxStatus').html("Sorry! Checkbox is not checked");
         }
         return false;
   })
    
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <p>
    <label>
      <input type="checkbox" name="CheckboxGroup1" value="checkbox" id="CheckboxGroup1_0">
      Checkbox</label>
    <br>
    <label>
      <input type="checkbox" name="CheckboxGroup1_" value="checkbox" id="CheckboxGroup1_1">
      Checkbox</label>
    <br>
  </p>
  <p>
    <input type="reset" value="Reset">
    <input type="submit" id="buttoncheck" value="Check">
  </p>
  <p class="checkboxStatus"></p>
</form>

3
Ashok

Il y a deux façons de vérifier l'état.

if ($("#checkSurfaceEnvironment-1").is(":checked")) {
    // Put your code here if checkbox is checked
}

OU vous pouvez aussi utiliser celui-ci

if($("#checkSurfaceEnvironment-1").prop('checked') == true){
    // Put your code here if checkbox is checked
}

J'espère que cela vous sera utile.

1
Gaurang Sondagar

essaye celui-là

if ($("#checkSurfaceEnvironment-1:checked").length>0) {
    //your code in case of NOT checked
}

Dans Code ci-dessus, sélectionnez l'élément par Id (#checkSurfaceEnvironment-1), puis filtrez son état vérifié par le filtre (:checked).

Il retournera un tableau d'objet d'élément vérifié. S'il existe un objet dans le tableau, la condition sera satisfaite.

1
Satish Kumar sonker

Renvoie true si toutes les cases sont cochées dans un div

function all_checked (id_div){
 all_checked = true;

 $(id_div+' input[type="checkbox"]').each(function() { 
    all_checked = all_checked && $('this').prop('checked');
 }

 return all_checked;
}
1
Martin Da Rosa

Simple et facile à vérifier ou non vérifié

<input type="checkbox" id="ev-click" name="" value="" >

<script>
    $( "#ev-click" ).click(function() {
        if(this.checked){
            alert('checked');
        }
        if(!this.checked){
            alert('Unchecked');
        }
    });
</script>
1
Ravi Bhoraniya

Voici le moyen le plus simple donné 

 <script type="text/javascript">

        $(document).ready(function () {
            $("#chk_selall").change("click", function () {

                if (this.checked)
                {
                    //do something
                }
                if (!this.checked)
                {
                    //do something

                }

            });

        });

    </script>
1
Debendra Dash

Je l'ai utilisé et a travaillé pour moi!

$("checkbox selector").click(function() {
    if($(this).prop('checked')==true){
       do what you need!
    }
});
0
Seyed

Je sais que cela a déjà été répondu, mais c'est quand même une bonne façon de le faire 

if ($("#checkbox").is(":checked")==false) {
    //Do stuff here like: $(".span").html("<span>Lorem</span>");
}
0
Hello World

Je pense que le moyen le plus simple (avec jQuery) de vérifier si la case est cochée ou non est:

si 'coché': 

if ($(this).is(':checked')) {
// I'm checked let's do something
}

si NON coché: 

if (!$(this).is(':checked')) {
// I'm NOT checked let's do something
}
0
Michael Stachura
if($("#checkbox1").prop('checked') == false){
    alert('checkbox is not checked');
    //do something
}
else
{ 
    alert('checkbox is checked');
}
0
Rutvik kakadiya