how - remove check checkbox jquery




Come verificare se una casella di controllo è selezionata in jQuery? (20)

Come faccio a interrogare correttamente la proprietà selezionata?

La proprietà checked di un elemento DOM checkbox ti darà lo stato checked 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ù carino per farlo, usando l' 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>

Devo controllare la proprietà checked di una casella di controllo ed eseguire un'azione basata sulla proprietà controllata usando jQuery.

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

Ma il seguente codice restituisce false per impostazione predefinita:

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

Come faccio a interrogare correttamente la proprietà checked ?


A partire da jQuery 1.6, il comportamento di jQuery.attr() è cambiato e gli utenti sono incoraggiati a non utilizzarlo per recuperare lo stato selezionato 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")

Credo che potresti fare questo:

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

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

Modo per verificare utilizzando jQuery

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

Controlla esempio o anche documento:


Il mio modo di farlo è:

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

L'utilizzo del gestore eventi Click per la proprietà checkbox non è affidabile, in quanto la proprietà checked può cambiare durante l'esecuzione del gestore eventi stesso!

Idealmente, vorresti inserire il tuo codice in un gestore di eventi di change , come ad esempio che viene attivato ogni volta che viene modificato il valore della casella di controllo (indipendentemente da come è stato fatto).

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

   if ($(this).is(':checked'))
     $("#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 di controllo è stata selezionata o meno, e sembra funzionare come un incantesimo.

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

Sono sicuro che puoi usare l'ID invece di CssClass,

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

Spero che questo ti aiuta.


Penso che sarà quello semplice

$('#isAgeSelected').change(function() {
    if($(this).is(":checked")) {
        $('#txtAge').show();
    }
else{
        $('#txtAge').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.


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>


Questo funziona per me:

/* isAgeSelected being id for checkbox */

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

Questo ha funzionato per me:

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

Dove isAgeSelected è l'id del controllo.

Inoltre, la answer @ karim79 funziona bene. Non sono sicuro di ciò che ho perso nel momento in cui l'ho testato.

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


Sebbene tu abbia proposto una soluzione JavaScript per il tuo problema (visualizzando una textbox quando viene checked una checkbox checked ), questo problema potrebbe essere risolto solo da css . Con questo approccio, il tuo modulo funziona per gli utenti che hanno disabilitato JavaScript.

Supponendo di avere il seguente codice HTML:

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

Puoi 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 .


Sto usando questo e questo funziona perfettamente bene:

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

Nota: se la casella è selezionata, restituirà true altrimenti non definito, quindi è meglio controllare il valore "TRUE".


Usa la funzione jQuery is() :

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

Usa questo:

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

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


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


1) Se il tuo markup HTML è:

<input type="checkbox"  />

attr usato:

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

Se si usa il prop:

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

2) Se il tuo markup HTML è:

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

attr usato:

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

Prop usato:

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

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

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

Questo restituisce true se l'input è selezionato e false se non lo è.







checkbox