javascript js event - Impostando "checked" per una checkbox con jQuery?



15 Answers

Uso:

$(".myCheckbox").attr('checked', true); // Deprecated
$(".myCheckbox").prop('checked', true);

E se vuoi controllare se una casella di controllo è selezionata o meno:

$('.myCheckbox').is(':checked');
onchange when is

Mi piacerebbe fare qualcosa di simile a spuntare una checkbox usando jQuery :

$(".myCheckBox").checked(true);

o

$(".myCheckBox").selected(true);

Esiste una cosa del genere?




Tu puoi fare

$('.myCheckbox').attr('checked',true) //Standards compliant

o

$("form #mycheckbox").attr('checked', true)

Se hai un codice personalizzato nell'evento onclick per la casella di controllo che desideri attivare, utilizza invece questo:

$("#mycheckbox").click();

Puoi deselezionare rimuovendo completamente l'attributo:

$('.myCheckbox').removeAttr('checked')

Puoi selezionare tutte le caselle di controllo come questa:

$(".myCheckbox").each(function(){
    $("#mycheckbox").click()
});



$("#mycheckbox")[0].checked = true;
$("#mycheckbox").attr('checked', true);
$("#mycheckbox").click();

L'ultimo attiverà l'evento click per la casella di controllo, gli altri no. Pertanto, se hai un codice personalizzato nell'evento onclick per la casella di controllo che desideri attivare, utilizza l'ultimo.




Supponendo che la domanda sia ...

Come faccio a selezionare una casella di spunta impostata su VALORE?

Ricorda che in un tipico set di caselle di controllo, tutti i tag di input hanno lo stesso nome, differiscono in base al value dell'attributo : non ci sono ID per ogni input del set.

La risposta di Xian può essere estesa con un selettore più specifico , utilizzando la seguente riga di codice:

$("input.myclass[name='myname'][value='the_value']").prop("checked", true);



Seleziona gli elementi che hanno l'attributo specificato con un valore contenente la sottostringa data "ckbItem":

$('input[name *= ckbItem]').prop('checked', true);

Seleziona tutti gli elementi che contengono ckbItem nel suo attributo name.




Ecco un modo per farlo senza jQuery

function addOrAttachListener(el, type, listener, useCapture) {
  if (el.addEventListener) {
    el.addEventListener(type, listener, useCapture);
  } else if (el.attachEvent) {
    el.attachEvent("on" + type, listener);
  }
};

addOrAttachListener(window, "load", function() {
  var cbElem = document.getElementById("cb");
  var rcbElem = document.getElementById("rcb");
  addOrAttachListener(cbElem, "click", function() {
    rcbElem.checked = cbElem.checked;
  }, false);
}, false);
<label>Click Me!
  <input id="cb" type="checkbox" />
</label>
<label>Reflection:
  <input id="rcb" type="checkbox" />
</label>




Ecco il codice per selezionato e deselezionato con un pulsante:

var set=1;
var unset=0;
jQuery( function() {
    $( '.checkAll' ).live('click', function() {
        $( '.cb-element' ).each(function () {
            if(set==1){ $( '.cb-element' ).attr('checked', true) unset=0; }
            if(set==0){ $( '.cb-element' ).attr('checked', false); unset=1; }
        });
        set=unset;
    });
});

Aggiornamento: qui è lo stesso blocco di codice che utilizza il nuovo metodo prop Jquery 1.6+, che sostituisce attr:

var set=1;
var unset=0;
jQuery( function() {
    $( '.checkAll' ).live('click', function() {
        $( '.cb-element' ).each(function () {
            if(set==1){ $( '.cb-element' ).prop('checked', true) unset=0; }
            if(set==0){ $( '.cb-element' ).prop('checked', false); unset=1; }
        });
        set=unset;
    });
});



Se stai usando PhoneGap per lo sviluppo di applicazioni e hai un valore sul pulsante che vuoi mostrare immediatamente, ricordati di farlo

$('span.ui-[controlname]',$('[id]')).text("the value");

Ho scoperto che senza lo span, l'interfaccia non si aggiornerà, non importa quello che fai.




Un'altra possibile soluzione:

    var c = $("#checkboxid");
    if (c.is(":checked")) {
         $('#checkboxid').prop('checked', false);
    } else {
         $('#checkboxid').prop('checked', true);
    }



Essere a conoscenza di perdite di memoria in Internet Explorer precedenti a Internet Explorer 9 , come api.jquery.com/prop :

In Internet Explorer precedente alla versione 9, l'utilizzo di .prop () per impostare una proprietà dell'elemento DOM su un valore diverso da un semplice valore primitivo (numero, stringa o booleano) può causare perdite di memoria se la proprietà non viene rimossa (utilizzando .removeProp ( )) prima che l'elemento DOM venga rimosso dal documento. Per impostare in modo sicuro i valori sugli oggetti DOM senza perdite di memoria, utilizzare .data ().




Per controllare e deselezionare

$('.myCheckbox').prop('checked', true);
$('.myCheckbox').prop('checked', false);



Come @ livefree75 ha detto:

jQuery 1.5.xe sotto

Puoi anche estendere l'oggetto $ .fn con nuovi metodi:

(function($)  {
   $.fn.extend({
      check : function()  {
         return this.filter(":radio, :checkbox").attr("checked", true);
      },
      uncheck : function()  {
         return this.filter(":radio, :checkbox").removeAttr("checked");
      }
   });
}(jQuery));

Ma nelle nuove versioni di jQuery, dobbiamo usare qualcosa del genere:

jQuery 1.6+

    (function($)  {
       $.fn.extend({
          check : function()  {
             return this.filter(":radio, :checkbox").prop("checked", true);
          },
          uncheck : function()  {
             return this.filter(":radio, :checkbox").prop("checked",false);
          }
       });
    }(jQuery));

Quindi puoi semplicemente fare:

    $(":checkbox").check();
    $(":checkbox").uncheck();



Il semplice JavaScript è molto semplice e molto meno costoso:

var elements = document.getElementsByClassName('myCheckBox');
for(var i = 0; i < elements.length; i++)
{
    elements[i].checked = true;
}

Esempio qui




Non riuscivo a farlo funzionare usando:

$("#cb").prop('checked', 'true');
$("#cb").prop('checked', 'false');

Sia true che false controllerebbero la casella. Ciò che ha funzionato per me è stato:

$("#cb").prop('checked', 'true'); // For checking
$("#cb").prop('checked', '');     // For unchecking



In jQuery,

if($("#checkboxId").is(':checked')){
    alert("Checked");
}

o

if($("#checkboxId").attr('checked')==true){
    alert("Checked");
}

In JavaScript,

if (document.getElementById("checkboxID").checked){
    alert("Checked");
}



Related