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




js checkbox checked event (20)

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

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

o

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

Esiste una cosa del genere?


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.


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

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

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>


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


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

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

Per controllare e deselezionare

$('.myCheckbox').prop('checked', true);
$('.myCheckbox').prop('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');
    }
});

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

Prova questo:

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

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

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.


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 .


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

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.


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.


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

Un'altra possibile soluzione:

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

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

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





checked