Come posso verificare se una casella è selezionata in jQuery?

Devo controllare la checkedproprietà di una casella di controllo ed eseguire un'azione in base alla proprietà selezionata usando jQuery.

Ad esempio, se la casella di controllo Età è selezionata, allora devo mostrare una casella di testo per inserire l'età, altrimenti nascondere la casella di testo.

Ma il seguente codice restituisce falseper impostazione predefinita:

if ($('#isAgeSelected').attr('checked'))
{
    $("#txtAge").show();
}
else
{
    $("#txtAge").hide();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="checkbox" id="isAgeSelected"/>

<div id="txtAge" style="display:none">
Age is selected
</div>

Come posso interrogare correttamente la checkedproprietà?

Come interrogare correttamente la proprietà selezionata?

La checkedproprietà di un elemento DOM della casella di controllo fornisce lo checkedstato dell'elemento.

Dato il tuo codice esistente, potresti quindi fare questo:

if(document.getElementById('isAgeSelected').checked) {
    $("#txtAge").show();
} else {
    $("#txtAge").hide();
}

Tuttavia, c'è un modo molto più bello per farlo, usando toggle:

$('#isAgeSelected').click(function() {
    $("#txtAge").toggle(this.checked);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="isAgeSelected"/>
<div id="txtAge" style="display:none">Age is something</div>

Usa la funzione is () di jQuery :

if($("#isAgeSelected").is(':checked'))
    $("#txtAge").show();  // checked
else
    $("#txtAge").hide();  // unchecked

Uso di jQuery> 1.6

<input type="checkbox" value="1" name="checkMeOut" id="checkMeOut" checked="checked" />

// traditional attr
$('#checkMeOut').attr('checked'); // "checked"
// new property method
$('#checkMeOut').prop('checked'); // true

Utilizzando il nuovo metodo della proprietà:

if($('#checkMeOut').prop('checked')) {
    // something when checked
} else {
    // something else when not
}

jQuery 1.6+

$('#isAgeSelected').prop('checked')

jQuery 1.5 e precedenti

$('#isAgeSelected').attr('checked')

Qualsiasi versione di jQuery

// Assuming an event handler on a checkbox
if (this.checked)

Tutto il merito va a Xian .

Sto usando questo e questo funziona perfettamente:

$("#checkkBoxId").attr("checked") ? alert("Checked") : alert("Unchecked");

Nota: se la casella di controllo è selezionata, verrà restituito true altrimenti non definito, quindi è meglio verificare il valore "TRUE".

Uso:

<input type="checkbox" name="planned_checked" checked id="planned_checked"> Planned

$("#planned_checked").change(function() {
    if($(this).prop('checked')) {
        alert("Checked Box Selected");
    } else {
        alert("Checked Box deselect");
    }
});

    $("#planned_checked").change(function() {
        if($(this).prop('checked')) {
            alert("Checked Box Selected");
        } else {
            alert("Checked Box deselect");
        }
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" name="planned_checked" checked id="planned_checked"> Planned

Da jQuery 1.6, il comportamento di jQuery.attr()è cambiato e gli utenti sono incoraggiati a non usarlo per recuperare lo stato controllato di un elemento. Invece, dovresti usare jQuery.prop():

$("#txtAge").toggle(
    $("#isAgeSelected").prop("checked") // For checked attribute it returns true/false;
                                        // Return value changes with checkbox state
);

Altre due possibilità sono:

$("#txtAge").get(0).checked
$("#txtAge").is(":checked")

Questo ha funzionato per me:

$get("isAgeSelected ").checked == true

Dove isAgeSelected l'ID del controllo.

Inoltre, la risposta di @ karim79 funziona bene. Non sono sicuro di cosa mi sono perso al momento del test.

Nota, questa è la risposta che utilizza Microsoft Ajax, non jQuery

Se stai utilizzando una versione aggiornata di jquery, devi cercare il .propmetodo per risolvere il problema:

$('#isAgeSelected').prop('checked')tornerà truese selezionato e falsese non selezionato. L'ho confermato e ho riscontrato questo problema in precedenza. $('#isAgeSelected').attr('checked')e $('#isAgeSelected').is('checked')sta tornando undefinedche non è una risposta degna per la situazione. Quindi fai come indicato di seguito.

if($('#isAgeSelected').prop('checked')) {
    $("#txtAge").show();
} else {
    $("#txtAge").hide();
}

Spero che aiuti:) - Grazie.

L'uso del Clickgestore eventi per la proprietà checkbox non è affidabile, in quantochecked proprietà può cambiare durante l'esecuzione del gestore eventi stesso!

Idealmente, si desidera inserire il codice in un changegestore eventi come viene attivato ogni volta che il valore della casella di controllo viene modificato (indipendentemente da come è stato fatto).

$('#isAgeSelected').bind('change', function () {

   if ($(this).is(':checked'))
     $("#txtAge").show();
   else
     $("#txtAge").hide();
});

Uso:

<input type="checkbox" id="abc" value="UDB">UDB
<input type="checkbox" id="abc" value="Prasad">Prasad

$('input#abc').click(function(){
  if($(this).is(':checked'))
  {
    var checkedOne=$(this).val()
    alert(checkedOne);

    // Do some other action
  }
})

Ciò può essere utile se si desidera che l'azione richiesta debba essere eseguita solo quando si seleziona la casella non nel momento in cui si rimuove il segno di spunta.

Ho deciso di pubblicare una risposta su come fare esattamente la stessa cosa senza jQuery. Solo perché sono un ribelle.

var ageCheckbox = document.getElementById('isAgeSelected');
var ageInput = document.getElementById('txtAge');

// Just because of IE <333
ageCheckbox.onchange = function() {
    // Check if the checkbox is checked, and show/hide the text field.
    ageInput.hidden = this.checked ? false : true;
};

Per prima cosa ottieni entrambi gli elementi in base al loro ID. Quindi si assegna onchangeall'evento della casella di controllo una funzione che controlla se la casella di controllo è stata selezionata e imposta ilhidden proprietà del campo di testo dell'età in modo appropriato. In quell'esempio usando l'operatore ternario.

Ecco un violino per testarlo.

appendice

Se la compatibilità tra browser è un problema, propongo di impostare la displayproprietà CSS su none e inline .

elem.style.display = this.checked ? 'inline' : 'none';

Più lento ma compatibile con più browser.

Credo che potresti farlo:

if ($('#isAgeSelected :checked').size() > 0)
{
    $("#txtAge").show(); 
} else { 
    $("#txtAge").hide();
}

Mi sono imbattuto nello stesso identico problema. Ho una casella di controllo ASP.NET

<asp:CheckBox ID="chkBox1" CssClass='cssChkBox1' runat="server" />

Nel codice jQuery ho usato il seguente selettore per verificare se la casella era selezionata o meno e sembra funzionare come un incantesimo.

if ($("'.cssChkBox1 input[type=checkbox]'").is(':checked'))
{ ... } else { ... }

Sono sicuro che puoi anche utilizzare l'ID anziché CssClass,

if ($("'#cssChkBox1 input[type=checkbox]'").is(':checked'))
{ ... } else { ... }

Spero che questo ti aiuta.

Esistono molti modi per verificare se una casella è selezionata o meno:

Modo per verificare usando jQuery

if (elem.checked)
if ($(elem).prop("checked"))
if ($(elem).is(":checked"))
if ($(elem).attr('checked'))

Controlla l'esempio o anche documenta:

• http://api.jquery.com/attr/

• http://api.jquery.com/prop/

Questo codice ti aiuterà

$('#isAgeSelected').click(function(){
   console.log(this.checked);
   if(this.checked == true) {
        $("#txtAge").show();
    } else {
       $("#txtAge").hide();
   }
});

Questo funziona per me:

/* isAgeSelected being id for checkbox */

$("#isAgeSelected").click(function(){
  $(this).is(':checked') ? $("#txtAge").show() : $("#txtAge").hide();
});

Questo è un metodo diverso per fare la stessa cosa:

$(document).ready(function (){

    $('#isAgeSelected').click(function() {
        // $("#txtAge").toggle(this.checked);

        // Using a pure CSS selector
        if ($(this.checked)) {
            alert('on check 1');
        };

        // Using jQuery's is() method
        if ($(this).is(':checked')) {
            alert('on checked 2');
        };

        //  // Using jQuery's filter() method
        if ($(this).filter(':checked')) {
            alert('on checked 3');
        };
    });
});

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<input type="checkbox" id="isAgeSelected"/>
<div id="txtAge" style="display:none">Age is something</div>

Usa questo:

if ($('input[name="salary_in.Basic"]:checked').length > 0)

La lunghezza è maggiore di zero se la casella è selezionata.

Il mio modo di farlo è:

if ( $("#checkbox:checked").length ) {       
    alert("checkbox is checked");
} else {
    alert("checkbox is not checked");
}

$(selector).attr('checked') !== undefined

Questo ritorna truese l'ingresso è controllato e falsese non lo è.

$(document).ready(function() {    
    $('#agecheckbox').click(function() {
        if($(this).is(":checked"))
        {
            $('#agetextbox').show();
        } else {
            $('#agetextbox').hide();
        }
    });
});

Puoi usare:

  if(document.getElementById('isAgeSelected').checked)
    $("#txtAge").show();  
  else
    $("#txtAge").hide();

if($("#isAgeSelected").is(':checked'))
  $("#txtAge").show();  
else
  $("#txtAge").hide();

Entrambi dovrebbero funzionare.

1) Se il markup HTML è:

<input type="checkbox"  />

attr utilizzato:

$(element).attr("checked"); // Will give you undefined as initial value of checkbox is not set

Se si usa il puntello:

$(element).prop("checked"); // Will give you false whether or not initial value is set

2) Se il markup HTML è:

 <input type="checkbox"  checked="checked" />// May be like this also  checked="true"

attr utilizzato:

$(element).attr("checked") // Will return checked whether it is checked="true"

Prop usato:

$(element).prop("checked") // Will return true whether checked="checked"

Questo esempio è per il pulsante.

Prova quanto segue:

<input type="button" class="check" id="checkall" value="Check All" />  &nbsp; <input type="button" id="remove" value="Delete" /> <br/>

<input type="checkbox" class="cb-element"  value="1" /> Checkbox  1 <br/>
<input type="checkbox" class="cb-element"  value="2" /> Checkbox  2 <br/>
<input type="checkbox" class="cb-element"  value="3" /> Checkbox  3 <br/>


$('#remove').attr('disabled', 'disabled'); 

$(document).ready(function() {  

    $('.cb-element').click(function() {

        if($(this).prop('checked'))
        {
            $('#remove').attr('disabled', false);
        }
        else
        {
            $('#remove').attr('disabled', true);
        }
    });   

    $('.check:button').click(function()
{
    var checked = !$(this).data('checked');
    $('input:checkbox').prop('checked', checked);
    $(this).data('checked', checked);

    if(checked == true)
    {
        $(this).val('Uncheck All');
         $('#remove').attr('disabled', false);
    }

    else if(checked == false)
    {
        $(this).val('Check All');
        $('#remove').attr('disabled', true);
    }
});
});

La risposta migliore non l'ha fatto per me. Questo ha fatto però:

<script type="text/javascript">
    $(document).ready(function(){

        $("#li_13").click(function(){
            if($("#agree").attr('checked')){
                $("#saveForm").fadeIn();
            }
            else
            {
                $("#saveForm").fadeOut();
            }
        });
    });
</script>

Fondamentalmente quando si fa clic sull'elemento # li_13, controlla se l'elemento # accetta (che è la casella di controllo) viene controllato utilizzando la .attr('checked')funzione. Se è quindi sbiadito nell'elemento #saveForm, e in caso contrario dissolvenza Esci dall'elemento saveForm.

Sto usando questo:

 <input type="checkbox" id="isAgeSelected" value="1" /> <br/>
 <input type="textbox" id="txtAge" />

 $("#isAgeSelected").is(':checked') ? $("#txtAge").show() : $("#txtAge").hide();

Sebbene tu abbia proposto una soluzione JavaScript per il tuo problema (mostrando un textboxquando checkboxè checked), questo problema potrebbe essere risolto solo da CSS . Con questo approccio, il modulo funziona per gli utenti che hanno disabilitato JavaScript.

Supponendo che tu abbia il seguente HTML:

<label for="show_textbox">Show Textbox</label>
<input id="show_textbox" type="checkbox" />
<input type="text" />

È possibile utilizzare il seguente CSS per ottenere la funzionalità desiderata:

 #show_textbox:not(:checked) + input[type=text] {display:none;}

Per altri scenari, potresti pensare a selettori CSS appropriati.

Ecco un violino per dimostrare questo approccio .

Attiva / disattiva: 0/1 o altro

<input type="checkbox" id="nolunch" />
<input id="checklunch />"

    $('#nolunch').change(function () {
    if ($(this).is(':checked')) {
        $('#checklunch').val('1');
    };
    if ($(this).is(':checked') == false) {
        $('#checklunch').val('0');
    };
});

Penso che sarà quello semplice

$('#isAgeSelected').change(function() {
    if($(this).is(":checked")) {
        $('#txtAge').show();
    }
else{
        $('#txtAge').hide();
    }                                          
});