Domanda Impostando "checked" per una checkbox con jQuery?


Mi piacerebbe fare qualcosa di simile per spuntare a checkbox utilizzando jQuery:

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

o

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

Esiste una cosa del genere?


3594
2018-01-08 22:20


origine


risposte:


jQuery 1.6+

Usa il nuovo .prop() metodo:

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

jQuery 1.5.xe sotto

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 prima della versione 1.6 ed è preferibile usare

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

poiché quest'ultimo, se la casella è stata inizialmente controllata, modifica il comportamento di una chiamata a .reset() su qualsiasi forma che lo contiene - un cambiamento di comportamento sottile ma probabilmente indesiderato.

Per ulteriori contesti, alcune discussioni incomplete sulle modifiche alla gestione di checked attributo / proprietà nella transizione da 1.5.x a 1.6 possono essere trovati in note sulla versione 1.6 e il Attributi vs. Proprietà sezione del .prop() documentazione.

Qualsiasi versione di jQuery

Se stai lavorando con un solo elemento, puoi sempre modificare solo il HTMLInputElement'S .checked proprietà:

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

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


5401
2018-01-08 22:25



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

622
2018-01-08 22:25



Questo è il modo corretto di controllare e deselezionare le checkbox con jQuery, poiché è standard multipiattaforma e volere consentire i repository del modulo.

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

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

In questo modo, stai utilizzando gli standard JavaScript per controllare e deselezionare le caselle di controllo, quindi qualsiasi browser che implementa correttamente la proprietà "checked" dell'elemento checkbox eseguirà questo codice in modo impeccabile. Questo dovrebbero essere tutti i principali browser, ma non riesco a testare in precedenza a Internet Explorer 9.

Il problema (jQuery 1.6):

Una volta che un utente fa clic su una casella di controllo, tale casella di controllo smette di rispondere alle modifiche all'attributo "verificato".

Ecco un esempio di attributo checkbox che non riesce a fare il lavoro dopo che qualcuno lo ha fatto cliccato la casella di controllo (questo accade in Chrome).

Violino

La soluzione:

Usando la proprietà "checked" di JavaScript su DOM elementi, siamo in grado di risolvere il problema direttamente, invece di provare a manipolare il DOM nel fare ciò che noi volere da fare.

Violino

Questo plugin modificherà la proprietà selezionata di tutti gli elementi selezionati da jQuery e controllerà e deselezionerà correttamente le checkbox in tutte le circostanze. Pertanto, sebbene possa sembrare una soluzione onerosa, migliorerà l'esperienza utente del tuo sito e aiuterà a prevenire la frustrazione degli utenti.

(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 vuoi utilizzare un plug-in, puoi 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;
});

284
2018-05-06 19:31



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

129
2018-01-08 22:24



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ù unici come mycheck () e myuncheck () nel caso in cui tu usi qualche altra libreria che usa quei nomi.


67
2017-08-20 18:19



$("#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.


58
2018-01-08 22:36



Per selezionare una casella da utilizzare

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

o

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

e per deselezionare una casella di controllo, devi 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.

DEMO BAD 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.

Entrambi i demo usano

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

56
2018-03-23 15:22



Supponendo che la domanda sia ...

Come faccio a selezionare un set di caselle di controllo PER VALORE?

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

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

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

42
2018-06-24 11:33



Mi manca la soluzione. Userò sempre:

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

42
2017-09-20 11:43