Mi piacerebbe fare qualcosa del genere per spuntare checkboxusando jQuery :

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

o

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

Esiste una cosa del genere?

JQuery moderno

Utilizzare .prop():

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

API DOM

Se lavori con un solo elemento, puoi sempre accedere al sottostante HTMLInputElemente modificarne la .checkedproprietà:

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

jQuery 1.5.xo inferiore

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

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

Si noti che questo è l'approccio utilizzato dai test unitari di jQuery precedenti alla versione 1.6 ed è preferibile utilizzarlo $('.myCheckbox').removeAttr('checked');poiché quest'ultimo, se la casella è stata inizialmente selezionata, cambierà il comportamento di una chiamata .reset()su qualsiasi modulo che la contenga: un metodo sottile ma probabilmente cambiamento di comportamento indesiderato.

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

Uso:

$(".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 selezione o la deselezione caselle con jQuery, come è standard multi-piattaforma, e vi permetterà ripubblica modulo.

$('.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 la proprietà "selezionata" dell'elemento checkbox eseguirà questo codice in modo impeccabile. Questo dovrebbe essere tutti i principali browser, ma sono in grado di testare precedente a Internet Explorer 9.

Il problema (jQuery 1.6):

Quando un utente fa clic su una casella di controllo, quella casella di controllo smette di rispondere alle modifiche dell'attributo "selezionato".

Ecco un esempio dell'attributo della casella di controllo che non riesce a fare il lavoro dopo che qualcuno ha fatto clic sulla casella di controllo (ciò accade in Chrome).

Violino

La soluzione:

Usando la proprietà "controllata" di JavaScript sugli elementi DOM , siamo in grado di risolvere direttamente il problema, invece di provare a manipolare il DOM nel fare ciò che vogliamo che faccia.

Violino

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 frammenti di codice:

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

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

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

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

Oppure potresti voler dare loro nomi più unici 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 genererà 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 che dovresti usare

 $('.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 fate

  $('.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 farò 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');
    }
});

Questo seleziona gli elementi che hanno l'attributo specificato con un valore contenente la sottostringa "ckbItem" fornita:

$('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 di controllo PER VALORE?

Ricorda che in un tipico set di caselle di controllo, tutti i tag di input hanno lo stesso nome, differiscono per l'attributovalue : 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 versioni successive, procedi come segue:

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 usando jQuery 1.5 o precedente:

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>

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 più recente 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;
    });
});

Prova questo:

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

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

Possiamo usare elementObjectcon jQuery per verificare 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 usando PhoneGap per lo sviluppo di applicazioni e hai un valore sul pulsante che vuoi mostrare all'istante, 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);
    }

Come diceva @ livefree75:

jQuery 1.5.xo inferiore

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

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

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

Prestare attenzione alle perdite di memoria in Internet Explorer prima di Internet Explorer 9 , come indicato nella documentazione di jQuery :

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 di base (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 valori su oggetti DOM senza perdite di memoria, utilizzare .data ().

Per jQuery 1.6+

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

Per jQuery 1.5.xo inferiore

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

Controllare,

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

Per selezionare e deselezionare

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

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

Ancora più breve sarebbe:

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

Ecco anche 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 riuscivo a farlo funzionare usando:

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

Sia vero che falso verrebbe spuntata la 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 abbastanza. Dovresti anche chiamare la seguente funzione;

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

Soprattutto quando hai rimosso l'attributo checkbox check.

Ecco la risposta completa usando 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");
}