Frage Setzen Sie "checked" für ein Kontrollkästchen mit jQuery?


Ich würde gerne so etwas tun, um ein Häkchen zu setzen checkbox verwenden jQuery:

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

oder

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

Gibt es so etwas?


3595
2018-01-08 22:20


Ursprung


Antworten:


jQuery 1.6+

Benutze das Neue .prop() Methode:

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

jQuery 1.5.x und niedriger

Das .prop() Methode ist nicht verfügbar, also müssen Sie verwenden .attr().

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

Beachten Sie, dass dies ist Der Ansatz, der von jQuery Unit Tests vor Version 1.6 verwendet wurde und ist der Verwendung vorzuziehen

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

da letzteres, wenn die Box anfänglich überprüft wurde, das Verhalten eines Anrufs zu ändern .reset() auf jeder Form, die es enthält - eine subtile, aber wahrscheinlich unwillkommene Verhaltensänderung.

Für mehr Kontext, einige unvollständige Diskussion der Änderungen in der Handhabung der checked Attribut / Eigenschaft im Übergang von 1.5.x zu 1.6 finden Sie in der Versionshinweise Version 1.6 und das Attribute vs. Eigenschaften Abschnitt der .prop() Dokumentation.

Jede Version von jQuery

Wenn Sie nur mit einem Element arbeiten, können Sie immer nur das Element ändern HTMLInputElementist es .checked Eigentum:

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

Der Vorteil der Verwendung der .prop() und .attr() Methoden dagegen sind, dass sie auf alle übereinstimmenden Elemente angewendet werden.


5402
2018-01-08 22:25



Benutzen:

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

Und wenn Sie überprüfen möchten, ob ein Kontrollkästchen aktiviert ist oder nicht:

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

622
2018-01-08 22:25



Dies ist die korrekte Methode zum Aktivieren und Deaktivieren von Kontrollkästchen mit jQuery, da es sich um einen plattformübergreifenden Standard handelt werden Erlaube Formular-Reposts.

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

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

Auf diese Weise verwenden Sie JavaScript-Standards zum Aktivieren und Deaktivieren von Kontrollkästchen, sodass jeder Browser, der die Eigenschaft "checked" des Kontrollkästchenelements ordnungsgemäß implementiert, diesen Code fehlerfrei ausführt. Dies sollte alle gängigen Browser sein, aber ich kann nicht vor Internet Explorer 9 testen.

Das Problem (jQuery 1.6):

Sobald ein Benutzer auf ein Kontrollkästchen klickt, reagiert dieses Kontrollkästchen nicht mehr auf die "geprüften" Attributänderungen.

Hier ist ein Beispiel dafür, dass das Checkbox-Attribut den Job nicht ausführt, nachdem jemand es getan hat geklickt das Kontrollkästchen (das passiert in Chrome).

Geige

Die Lösung:

Durch die Verwendung der JavaScript-Eigenschaft "checked" auf der DOM Elemente, wir sind in der Lage, das Problem direkt zu lösen, anstatt zu versuchen, das DOM zu manipulieren, was wir tun wollen es zu tun.

Geige

Dieses Plugin ändert die checked-Eigenschaft von allen Elementen, die von jQuery ausgewählt wurden, und aktiviert und deaktiviert die Kontrollkästchen unter allen Umständen. Dies mag zwar wie eine übermäßige Lösung erscheinen, wird jedoch die Benutzererfahrung auf Ihrer Website verbessern und dazu beitragen, Frustration für den Benutzer 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 die folgenden Code-Snippets verwenden:

// 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



Du kannst tun

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

oder

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

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

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

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

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

Sie können alle Kontrollkästchen wie folgt aktivieren:

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

129
2018-01-08 22:24



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 kannst du einfach tun:

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

Oder Sie möchten ihnen eindeutigere Namen wie mycheck () und myuncheck () geben, falls Sie eine andere Bibliothek verwenden, die diese Namen verwendet.


67
2017-08-20 18:19



$("#mycheckbox")[0].checked = true;
$("#mycheckbox").attr('checked', true);
$("#mycheckbox").click();

Der letzte wird das Click-Ereignis für das Kontrollkästchen auslösen, die anderen nicht. Wenn Sie im onclick-Ereignis benutzerdefinierten Code für das Kontrollkästchen haben, das Sie auslösen möchten, verwenden Sie das letzte.


58
2018-01-08 22:36



Um ein Kontrollkästchen zu aktivieren, sollten Sie verwenden

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

oder

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

Um ein Kontrollkästchen zu deaktivieren, sollten Sie es immer auf "false" setzen:

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

Wenn Sie tun

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

Es entfernt das Attribut alle zusammen und daher können Sie das Formular nicht zurücksetzen.

BAD DEMO jQuery 1.6. Ich denke, das ist kaputt. Für 1.6 werde ich einen neuen Beitrag dazu machen.

NEUE ARBEITS-DEMO jQuery 1.5.2 funktioniert in Chrome.

Beide Demos verwenden

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

56
2018-03-23 15:22



Angenommen, die Frage ist ...

Wie überprüfe ich ein Checkbox-Set? WERT?

Denken Sie daran, dass in einem typischen Kontrollkästchen alle Eingabe-Tags denselben Namen haben. Sie unterscheiden sich durch das Attribut value: Es gibt keine ID für jeden Eingang des Satzes.

Xian's Antwort kann mit einem erweitert werden spezifischerer Selektorunter Verwendung der folgenden Codezeile:

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

42
2018-06-24 11:33