Impostazione "selezionata" per una casella di controllo con jQuery?

StackOverflow https://stackoverflow.com/questions/426258

Domanda

Vorrei fare qualcosa del genere per spuntare una checkbox usando jQuery : 

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

o 

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

Esiste una cosa del genere?

È stato utile?

Soluzione

jQuery 1.6+ +

Utilizza il nuovo metodo .prop () : 

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

jQuery 1.5.xe precedenti

Il metodo .prop () non è disponibile, quindi è necessario utilizzare .attr () . 

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

Nota che questo è l'approccio utilizzato da I test unitari di jQuery precedenti alla versione 1.6 ed è preferibile utilizzare 

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

poiché quest'ultimo, se la casella era inizialmente selezionata, cambierà il comportamento di una chiamata in .reset () su qualsiasi modulo che lo contiene - un cambiamento di comportamento sottile ma probabilmente indesiderato.

Per ulteriori contesti, alcune discussioni incomplete sulle modifiche alla gestione dell'attributo / proprietà controllato nella transizione da 1.5.xa 1.6 sono disponibili in versione 1.6 note di rilascio e la sezione Attributi vs. Proprietà di la .prop () documentazione .

Qualsiasi versione di jQuery

Se lavori con un solo elemento, puoi sempre modificare Proprietà HTMLInputElement .checked : 

$('.myCheckbox')[0].checked = true;
$('.myCheckbox')[0].checked = false;

Il vantaggio di usare i metodi .prop () e .attr () invece di questo è che funzioneranno su tutti gli elementi corrispondenti.

Altri suggerimenti

Usa: 

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

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

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

Questo è il modo corretto di selezionare e deselezionare le caselle di controllo con jQuery, poiché è standard multipiattaforma e consentirà di consentire il repository di moduli. 

$('.myCheckBox').each(function(){ this.checked = true; });

$('.myCheckBox').each(function(){ this.checked = false; });

In questo modo, stai utilizzando gli standard JavaScript per selezionare e deselezionare le caselle di controllo, quindi qualsiasi browser che implementa correttamente il "spuntato" La proprietà dell'elemento checkbox eseguirà questo codice in modo impeccabile. Questo dovrebbe essere tutti i principali browser, ma non sono in grado di testare prima di Internet & nbsp; Explorer & nbsp; 9.

Il problema (jQuery 1.6):

Una volta che un utente fa clic su una casella di controllo, quella casella di controllo smette di rispondere a " spuntato " modifiche agli attributi.

Ecco un esempio dell'attributo checkbox che non riesce a fare il lavoro dopo che qualcuno ha cliccato la casella di controllo (ciò accade in Chrome).

Fiddle

La soluzione:

Utilizzando JavaScript " controllato " proprietà sugli DOM , siamo in grado di risolvere direttamente il problema, invece di provare a manipolare il DOM per fare quello che facciamo vuoi farlo.

Fiddle

Questo plugin altererà la proprietà selezionata di tutti gli elementi selezionati da jQuery e selezionerà e deselezionerà le caselle di controllo in tutte le circostanze. Pertanto, sebbene possa sembrare una soluzione vincente, migliorerà l'esperienza utente del tuo sito e contribuirà a prevenire la frustrazione dell'utente. 

(function( $ ) {
    $.fn.checked = function(value) {
        if(value === true || value === false) {
            // Set the value of the checkbox
            $(this).each(function(){ this.checked = value; });
        } 
        else if(value === undefined || value === 'toggle') {
            // Toggle the checkbox
            $(this).each(function(){ this.checked = !this.checked; });
        }

        return this;
    };
})( jQuery );

In alternativa, se non si desidera utilizzare un plug-in, è possibile utilizzare i seguenti snippet di codice: 

// Check
$(':checkbox').prop('checked', true);

// Un-check
$(':checkbox').prop('checked', false);

// Toggle
$(':checkbox').prop('checked', function (i, value) {
    return !value;
});

Puoi farlo 

$('.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 vuoi attivare, usa invece questo: 

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

Puoi deselezionare rimuovendo completamente l'attributo: 

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

Puoi selezionare tutte le caselle di controllo in questo modo: 

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

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));

Quindi puoi semplicemente fare: 

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

O potresti voler dare loro nomi più univoci come mycheck () e myuncheck () nel caso in cui usi qualche altra libreria che usa quei nomi. 

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

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

Per selezionare una casella di controllo è necessario utilizzare 

 $('.myCheckbox').attr('checked',true);

o 

 $('.myCheckbox').attr('checked','checked');

e per deselezionare una casella di controllo dovresti sempre impostarla su false: 

 $('.myCheckbox').attr('checked',false);

Se lo fai 

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

rimuove l'attributo tutti insieme e pertanto non sarà possibile reimpostare il modulo.

BAD DEMO jQuery 1.6 . Penso che questo sia rotto. Per 1.6 ho intenzione di fare un nuovo post su questo.

NUOVA DEMO DI LAVORO jQuery 1.5.2 funziona in Chrome.

Entrambe le demo usano 

$('#tc').click(function() {
    if ( $('#myCheckbox').attr('checked')) {
        $('#myCheckbox').attr('checked', false);
    } else {
        $('#myCheckbox').attr('checked', 'checked');
    }
});

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

Supponendo che la domanda sia ...

Come posso selezionare una casella PER VALORE?

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

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

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

Mi manca la soluzione. Userò sempre: 

if ($('#myCheckBox:checked').val() !== undefined)
{
    //Checked
}
else
{
    //Not checked
}

Per selezionare una casella di controllo utilizzando jQuery 1.6 o versione successiva, basta fare questo: 

checkbox.prop('checked', true);

Per deselezionare, utilizzare: 

checkbox.prop('checked', false);

Ecco cosa mi piace usare per attivare / disattivare una casella di controllo utilizzando jQuery: 

checkbox.prop('checked', !checkbox.prop('checked'));

Se stai utilizzando jQuery 1.5 o versioni precedenti: 

checkbox.attr('checked', true);

Per deselezionare, utilizzare: 

checkbox.attr('checked', false);

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>

Prova questo: 

$('#checkboxid').get(0).checked = true;  //For checking

$('#checkboxid').get(0).checked = false; //For unchecking

Ecco il codice per spuntato 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: ecco 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;
    });
});

Possiamo usare elementObject con jQuery per controllare l'attributo: 

$(objectElement).attr('checked');

Possiamo usarlo per tutte le versioni di jQuery senza errori.

Aggiornamento: Jquery 1.6+ ha il nuovo metodo prop che sostituisce attr, ad esempio: 

$(objectElement).prop('checked');

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

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

Ho scoperto che senza l'intervallo, l'interfaccia non si aggiornerà, qualunque cosa tu faccia.

Ecco il codice e la demo su come selezionare più caselle di controllo ...

http://jsfiddle.net/tamilmani/z8TTt/ 

$("#check").on("click", function () {

    var chk = document.getElementById('check').checked;
    var arr = document.getElementsByTagName("input");

    if (chk) {
        for (var i in arr) {
            if (arr[i].name == 'check') arr[i].checked = true;
        }
    } else {
        for (var i in arr) {
            if (arr[i].name == 'check') arr[i].checked = false;
        }
    }
});

Un'altra possibile soluzione: 

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

Se si utilizza il cellulare e si desidera che l'interfaccia si aggiorni e mostri la casella di controllo deselezionata, utilizzare quanto segue: 

$("#checkbox1").prop('checked', false).checkboxradio("refresh");

Presta attenzione alle perdite di memoria in Internet & Explorer prima di Internet & nbsp; Explorer & nbsp; 9 , come gli stati della documentazione jQuery :

  

In Internet Explorer precedente alla versione 9, utilizzare .prop () per impostare un DOM   proprietà di un elemento diverso da un semplice valore di base   (numero, stringa o valore booleano) può causare perdite di memoria se la proprietà lo è   non rimosso (utilizzando .removeProp ()) prima della rimozione dell'elemento DOM   dal documento. Per impostare in modo sicuro valori su oggetti DOM senza memoria   perdite, utilizzare .data ().

Per jQuery 1.6+ + 

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

Per jQuery 1.5.xe precedenti 

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

Per controllare, 

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

Per selezionare e deselezionare 

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

Come diceva @ livefree75:

jQuery 1.5.xe precedenti

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();

$('controlCheckBox').click(function(){
    var temp = $(this).prop('checked');
    $('controlledCheckBoxes').prop('checked', temp);
});

Questa è probabilmente la soluzione più breve e semplice: 

$(".myCheckBox")[0].checked = true;

o 

$(".myCheckBox")[0].checked = false;

Anche più breve sarebbe: 

$(".myCheckBox")[0].checked = !0;
$(".myCheckBox")[0].checked = !1;

Ecco un jsFiddle .

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 sono riuscito a farlo funzionare usando: 

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

Sia vero che falso verrebbero spuntati nella casella. Ciò che ha funzionato per me è stato: 

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

Quando hai spuntato una casella come; 

$('.className').attr('checked', 'checked')

potrebbe non essere sufficiente. Dovresti anche chiamare la seguente funzione; 

$('.className').prop('checked', 'true')

Soprattutto quando hai rimosso l'attributo checkbox check

Ecco la risposta completa utilizzando jQuery

Lo collaudo e funziona al 100%: D 

    // when the button (select_unit_button) is clicked it returns all the checed checkboxes values 
    $("#select_unit_button").on("click", function(e){

             var arr = [];

             $(':checkbox:checked').each(function(i){
                 arr[i] = $(this).val(); // u can get id or anything else
             });

              //console.log(arr); // u can test it using this in google chrome
    });

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");
}
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top