jQuery: tester si la case n'est PAS cochée

J'ai du mal à comprendre cela. J'ai deux cases à cocher (à l'avenir j'en aurai plus):

• checkSurfaceEnvironment-1
• checkSurfaceEnvironment-2

Fondamentalement, je veux écrire une instruction if et tester si l'un d'entre eux est vérifié et un autre n'est PAS vérifié. Quelle est la manière la plus simple d'accomplir ce qui suit:

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

Une façon fiable que j'utilise est:

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

Si vous souhaitez parcourir des é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 réel de la case à cocher. Si vous le souhaitez, vous pouvez inspecter la page et essayer de cocher et décocher une case, et vous remarquerez que l'attribut «coché» (s'il est présent) restera le même. Cet attribut représente uniquement l' état initial de la case à cocher, et non l' état actuel . L'état actuel est stocké dans la propriété vérifiée de l'élément dom pour cette case à cocher.

Voir les propriétés et attributs en HTML

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

Vous pouvez également utiliser la .not()méthode jQuery ou le :not()sélecteur:

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

Exemple JSFiddle

Notes complémentaires

À partir de la documentation de l'API jQuery pour le :not() sélecteur :

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

Une manière alternative:

Voici un exemple de travail et voici le code, vous devez é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é la façon de basculer l'attribut vérifié.

if ( $("#checkSurfaceEnvironment-1").is(":checked") && $("#checkSurfaceEnvironment-2").not(":checked") )

Je cherchais une implémentation plus directe comme l'avijendr l'a suggéré.

J'ai eu un peu de mal avec sa syntaxe, mais j'ai réussi à faire fonctionner:

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 qui avaient la chaîne checkPrintdans leur idétaient sans contrôle.

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

si 'vérifié':

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
}

Ici, j'ai un extrait de 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>

Pour le faire avec .attr()comme vous l'avez fait, pour voir si c'est vérifié, ce serait .attr("checked", "checked"), et si ce n'est pas le cas, ce serait.attr("checked") == undefined

Renvoie true si toutes les cases à cocher 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;
}

État 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>

essaye celui-là

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

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

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

Vous pouvez vérifier l'état de deux manières.

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

OU vous pouvez également 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.

Voici la manière la plus simple donnée

 <script type="text/javascript">

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

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

                }

            });

        });

    </script>

J'ai utilisé cela et j'ai travaillé pour moi!

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

Je sais que cela a déjà été répondu, mais c'est quand même un bon moyen de le faire:

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

if($("#checkbox1").prop('checked') == false){
    alert('checkbox is not checked');
    //do something
}
else
{ 
    alert('checkbox is checked');
}

$("#chkFruits_0,#chkFruits_1,#chkFruits_2,#chkFruits_3,#chkFruits_4").change(function () {
        var item = $("#chkFruits_0,#chkFruits_1,#chkFruits_2,#chkFruits_3,#chkFruits_4");
    if (item.is(":checked")==true) {
        //execute your code here
    }

    else if (item.is(":not(:checked)"))
    {
        //execute your code here
    }

});