Einstellung "checked" für ein Kontrollkästchen mit jQuery

Question

Ich würde gerne so etwas tun, um ein Häkchen bei checkbox mit jQuery :

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

o

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

Gibt es so etwas?

Answer 1

Modernes jQuery

Utilice .prop() :

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

DOM-API

Wenn Sie nur mit einem Element arbeiten, können Sie immer nur auf die zugrunde liegende HTMLInputElement und ändern seine .checked Eigentum:

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

Der Vorteil der Verwendung des .prop() y .attr() Methoden ist, dass sie auf alle übereinstimmenden Elemente wirken.

jQuery 1.5.x und niedriger

El .prop() Methode ist nicht verfügbar, daher müssen Sie die .attr() .

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

Beachten Sie, dass es sich hierbei um der Ansatz, der von den Unit-Tests von jQuery vor Version 1.6 verwendet wurde und ist vorzuziehen gegenüber der Verwendung von $('.myCheckbox').removeAttr('checked'); da letztere, wenn das Kästchen ursprünglich markiert war, das Verhalten eines Aufrufs von .reset() auf jedem Formular, das es enthält - eine subtile, aber wahrscheinlich unerwünschte Verhaltensänderung.

Für mehr Kontext, eine unvollständige Erörterung der Änderungen bei der Handhabung der checked Attribut/Eigenschaft beim Übergang von 1.5.x zu 1.6 finden Sie in der Version 1.6 Versionshinweise y el Attribute vs. Eigenschaften Abschnitt der .prop() Dokumentation .

Answer 2

Verwendung:

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

Und wenn Sie prüfen wollen, ob ein Kontrollkästchen aktiviert ist oder nicht:

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

Answer 3

Dies ist der korrekte Weg, um mit jQuery Kontrollkästchen zu aktivieren und zu deaktivieren, da dies ein plattformübergreifender Standard ist. wird die Wiederveröffentlichung von Formularen erlauben.

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

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

Auf diese Weise verwenden Sie JavaScript-Standards für das Aktivieren und Deaktivieren von Kontrollkästchen, so dass jeder Browser, der die Eigenschaft "checked" des Kontrollkästchen-Elements korrekt implementiert, diesen Code einwandfrei ausführen kann. Diese sollte in allen gängigen Browsern, aber ich kann keine Tests vor Internet Explorer 9 durchführen.

Das Problem (jQuery 1.6):

Sobald ein Benutzer auf ein Kontrollkästchen klickt, reagiert dieses Kontrollkästchen nicht mehr auf Änderungen des Attributs "checked".

Hier ist ein Beispiel dafür, dass das Attribut "checkbox" seine Aufgabe nicht erfüllt, nachdem jemand angeklickt das Kontrollkästchen (dies geschieht in Chrome).

Fiddle

Die Lösung:

Durch die Verwendung der JavaScript-Eigenschaft "checked" für die DOM Elementen können wir das Problem direkt lösen, anstatt zu versuchen, das DOM so zu manipulieren, dass es tut, was wir wollen. wollen es zu tun.

Fiddle

Dieses Plugin ändert die Eigenschaft "checked" aller Elemente, die mit jQuery ausgewählt wurden, und aktiviert und deaktiviert Kontrollkästchen unter allen Umständen. Auch wenn dies wie eine übermäßige Lösung erscheinen mag, wird es die Benutzerfreundlichkeit Ihrer Website verbessern und dazu beitragen, Frustration bei den Benutzern zu vermeiden.

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

Wenn Sie kein Plugin verwenden möchten, können Sie alternativ auch die folgenden Codeschnipsel verwenden:

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

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

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

Answer 4

Das können Sie tun

$('.myCheckbox').attr('checked',true) //Standards compliant

o

$("form #mycheckbox").attr('checked', true)

Wenn Sie benutzerdefinierten Code im onclick-Ereignis für das Kontrollkästchen haben, den Sie auslösen möchten, verwenden Sie stattdessen diesen:

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

Sie können die Markierung aufheben, indem Sie das Attribut vollständig entfernen:

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

Sie können alle Kästchen wie folgt ankreuzen:

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

Answer 5

Sie können das $.fn-Objekt auch mit neuen Methoden erweitern:

(function($)  {
   $.fn.extend({
      check : function()  {
         return this.filter(":radio, :checkbox").attr("checked", true);
      },
      uncheck : function()  {
         return this.filter(":radio, :checkbox").removeAttr("checked");
      }
   });
}(jQuery));

Dann können Sie es einfach tun:

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

Oder Sie können ihnen eindeutige Namen wie mycheck() und myuncheck() geben, falls Sie eine andere Bibliothek verwenden, die diese Namen benutzt.