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





input to (25)


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

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

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

o

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

Esiste una cosa del genere?




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



Questo è il modo corretto di controllare e deselezionare le caselle di controllo con jQuery, poiché è standard multipiattaforma e consentirà il riposizionamento 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 dovrebbe 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 ha fatto clic sulla casella di controllo (questo accade in Chrome).

Fiddle

La soluzione:

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

Fiddle

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



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>




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



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



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.




Possiamo usare elementObject con jQuery per ottenere l'attributo controllato:

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



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



Per selezionare una casella di controllo usando jQuery 1.6 o superiore, fai semplicemente questo:

checkbox.prop('checked', true);

Per deselezionare, usa:

checkbox.prop('checked', false);

Ecco cosa mi piace usare per attivare una casella di controllo usando jQuery:

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

Se stai usando jQuery 1.5 o inferiore:

checkbox.attr('checked', true);

Per deselezionare, usa:

checkbox.attr('checked', false);



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



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




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




Questa è probabilmente la soluzione più breve e più 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 .




Prova questo:

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

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



Se si utilizza il cellulare e si desidera aggiornare l'interfaccia e mostrare la casella di controllo come deselezionata, utilizzare quanto segue:

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



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



jQuery 1.6+

Usa il nuovo metodo .prop() :

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

jQuery 1.5.xe sotto

Il metodo .prop() 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 utilizzare

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

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

Per ulteriori contesti, alcune discussioni incomplete sulle modifiche alla gestione dell'attributo checked / della proprietà nella transizione da 1.5.x a 1.6 possono essere trovate nelle note di rilascio della versione 1.6 e nella sezione Attributi vs. Proprietà di .prop() documentazione .

Qualsiasi versione di jQuery

Se stai lavorando con un solo elemento, puoi sempre modificare la proprietà .checked :

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

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




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.




Quando hai spuntato una casella di controllo come;

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

potrebbe non essere abbastanza Dovresti anche chiamare la funzione qui sotto;

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

Soprattutto quando hai rimosso l'attributo checkbox check.




Mi manca la soluzione. Userò sempre:

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



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



Per controllare e deselezionare

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



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



Questa è la mia soluzione

$('#myTable').append('<tr><td>'+data+'</td><td>'+other data+'</td>...</tr>');




javascript jquery checkbox selected checked