jQuery: verifica se la casella di controllo NON è selezionata

Ho problemi a capirlo. Ho due caselle di controllo (in futuro ne avrò di più):

• checkSurfaceEnvironment-1
• checkSurfaceEnvironment-2

Fondamentalmente, voglio scrivere un'istruzione if e verificare se una di esse è selezionata e un'altra NON è selezionata. Qual è il modo più semplice per ottenere quanto segue:

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

Un modo affidabile che uso è:

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

Se vuoi iterare su elementi controllati usa l'elemento genitore

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

Ulteriori informazioni:

Funziona bene perché tutte le caselle di controllo hanno una proprietà selezionata che memorizza lo stato effettivo della casella di controllo. Se lo desideri puoi ispezionare la pagina e provare a selezionare e deselezionare una casella di controllo, e noterai che l'attributo "selezionato" (se presente) rimarrà lo stesso. Questo attributo rappresenta solo lo stato iniziale della casella di controllo e non lo stato corrente . Lo stato corrente è memorizzato nella proprietà selezionata dell'elemento dom per quella casella di controllo.

Vedere Proprietà e attributi in HTML

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

Puoi anche utilizzare il .not()metodo jQuery o il :not()selettore:

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

Esempio di JSFiddle

Note aggiuntive

Dalla documentazione dell'API jQuery per il :not() selettore :

Il metodo .not () finirà per fornire selezioni più leggibili rispetto a inserire selettori o variabili complessi in un filtro selettore : not () . Nella maggior parte dei casi, è una scelta migliore.

Un modo alternativo:

Ecco un esempio funzionante ed ecco il codice, dovresti anche usare 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");
    }
});​

Ho commentato il modo in cui attivare l'attributo selezionato.

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

Stavo cercando un'implementazione più diretta come suggerito da avijendr.

Ho avuto un piccolo problema con la sua sintassi, ma ho fatto funzionare questo:

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

Nel mio caso, avevo una tabella con una classe user-formse stavo controllando se una delle caselle di controllo che avevano la stringa checkPrintnella loro idera deselezionata.

Penso che il modo più semplice (con jQuery) per verificare se la casella di controllo è selezionata o NON è:

se 'spuntato':

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

se NON è 'spuntato':

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

Qui ho uno snippet per questa domanda.

$(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>

Per farlo con .attr()quello che hai, per vedere se è controllato lo sarebbe .attr("checked", "checked"), e se non lo fosse lo sarebbe.attr("checked") == undefined

Restituisce true se tutte le checbox sono contrassegnate in 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;
}

Condizione semplice e facile da controllare o deselezionata

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

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

prova questo

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

In Above code selezionando l'elemento per Id, (#checkSurfaceEnvironment-1)quindi filtrare lo stato selezionato per (:checked)filtro.

Restituirà un array di oggetti elemento selezionato. Se esiste un oggetto nell'array, la condizione if sarà soddisfatta.

Ci sono due modi per controllare le condizioni.

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

O puoi usare anche questo

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

Spero che questo ti sia utile.

Ecco il modo più semplice fornito

 <script type="text/javascript">

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

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

                }

            });

        });

    </script>

L'ho usato e ha funzionato per me!

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

So che è già stata data una risposta, ma comunque questo è un buon modo per farlo:

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
    }

});