Kontrollkästchen mit JavaScript (jQuery oder Vanille) aktivieren / deaktivieren?

Antworten:

974

Javascript:

// Check
document.getElementById("checkbox").checked = true;

// Uncheck
document.getElementById("checkbox").checked = false;

jQuery (1.6+):

// Check
$("#checkbox").prop("checked", true);

// Uncheck
$("#checkbox").prop("checked", false);

jQuery (1.5-):

// Check
$("#checkbox").attr("checked", true);

// Uncheck
$("#checkbox").attr("checked", false);
Alex Peattie
quelle
Die Verwendung von .prop scheint mit Jquery 1.11.2 in Firefox mit lokal gehosteten Dateien nicht zu funktionieren. .attr tut. Ich habe nicht vollständiger getestet. Hier ist der Code: `` `personContent.find (" [data-name = '"+ pass.name +"'] "). Children ('input'). Attr ('checked', true); `` `
Andrew Downes
3
Sollen wir lieber verwenden attroder prop?
Schwarz
15
Anscheinend .checked = true/falselöst das changeEreignis nicht aus: - \
Blatt
1
@albert: warum hast du zuordnungen zu strengen gleichheitstests geändert? Du hast die Antwort gebrochen.
Martijn Pieters
Du hast recht. das ist ganz und gar mein schlechtes. Entschuldigung
Albert
136

Wichtiges Verhalten, das noch nicht erwähnt wurde:

Durch programmgesteuertes Festlegen des markierten Attributs wird das changeEreignis des Kontrollkästchens nicht ausgelöst .

Überzeugen Sie sich selbst in dieser Geige:
http://jsfiddle.net/fjaeger/L9z9t04p/4/

(Geige getestet in Chrome 46, Firefox 41 und IE 11)

Die click()Methode

Eines Tages schreiben Sie möglicherweise Code, der vom ausgelösten Ereignis abhängt. Rufen Sie die click()Methode des Kontrollkästchenelements wie folgt auf, um sicherzustellen, dass das Ereignis ausgelöst wird:

document.getElementById('checkbox').click();

Dadurch wird jedoch der aktivierte Status des Kontrollkästchens umgeschaltet, anstatt es speziell auf trueoder zu setzen false. Denken Sie daran, dass das changeEreignis nur ausgelöst werden sollte, wenn sich das aktivierte Attribut tatsächlich ändert.

Dies gilt auch für die jQuery-Methode: Durch Festlegen des Attributs mit propoder attrwird das changeEreignis nicht ausgelöst.

Einstellung checkedauf einen bestimmten Wert

Sie können das checkedAttribut testen , bevor Sie die click()Methode aufrufen . Beispiel:

function toggle(checked) {
  var elm = document.getElementById('checkbox');
  if (checked != elm.checked) {
    elm.click();
  }
}

Weitere Informationen zur Klickmethode finden Sie hier:
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click

Sudoqux
quelle
8
Das ist eine gute Antwort, aber ich persönlich würde es vorziehen, das Änderungsereignis elm.dispatchEvent(new Event('change'));
auszulösen,
@ VictorSharovatov Warum möchten Sie das Änderungsereignis lieber auslösen?
PeterCo
2
Ich kann nur teilweise zustimmen - viele Webbrowser mit AdBlocks verteidigen DOM vor dem virtuellen Klicken () aufgrund unerwünschter Aktionen von Anzeigen
pkolawa
2
@PeterCo: Wahrscheinlich, weil es die Absicht klarer darstellt - klicken Sie auf das Element, um das Änderungsereignis auszulösen, anstatt ein Änderungsereignis auszulösen, um ein Änderungsereignis auszulösen - indirekt (Klicken löst eine Änderung aus) gegenüber direkt. Letzteres ist wesentlich klarer und erfordert nicht, dass der Leser weiß, dass ein Klick eine Änderung auslöst.
Bill Dagg
37

überprüfen:

document.getElementById("id-of-checkbox").checked = true;

zu deaktivieren:

document.getElementById("id-of-checkbox").checked = false;
Topherg
quelle
2
Das würde nur das markierte Attribut ändern. Onclick und ähnliche Ereignisse werden jedoch nicht ausgelöst.
Paul Stelian
16

Wir können ein Partikel-Kontrollkästchen wie folgt aktivieren:

$('id of the checkbox')[0].checked = true

und deaktivieren Sie durch,

$('id of the checkbox')[0].checked = false
AKS
quelle
1
Sie brauchen den Array-Index wirklich nicht, wenn Sie nur ein Element auswählen. Aber ich denke, wenn Sie explizit sein wollen. haha
Rizowski
6
@ Rizowski Sie benötigen den Index, um das native HTML-Element zu erhalten - jQuery-Objekte haben keine "überprüfte" Eigenschaft
Henrik Christensen
Das hat bei mir funktioniert. Ohne den Array-Index wurde ein undefinierter Fehler angezeigt. Vielen Dank, hat meinen Tag gerettet.
Neri
15

Ich möchte darauf hinweisen, dass das Setzen des Attributs 'checked' auf eine nicht leere Zeichenfolge zu einem Kontrollkästchen führt.

Wenn Sie also das Attribut " Überprüft" auf "Falsch" setzen , wird das Kontrollkästchen aktiviert. Ich musste den Wert auf die leere Zeichenfolge null oder den booleschen Wert false setzen, um sicherzustellen, dass das Kontrollkästchen nicht aktiviert war.

Jan Rasehorn
quelle
5
Dies liegt daran, dass eine nicht leere Zeichenfolge als wahr angesehen wird.
James Coyle
10

Versuche dies:

//Check
document.getElementById('checkbox').setAttribute('checked', 'checked');

//UnCheck
document.getElementById('chk').removeAttribute('checked');
Syed Jamil Uddin
quelle
6
<script type="text/javascript">
    $(document).ready(function () {
        $('.selecctall').click(function (event) {
            if (this.checked) {
                $('.checkbox1').each(function () {
                    this.checked = true;
                });
            } else {
                $('.checkbox1').each(function () {
                    this.checked = false;
                });
            }
        });

    });

</script>
M.Owais
quelle
6
function setCheckboxValue(checkbox,value) {
    if (checkbox.checked!=value)
        checkbox.click();
}
Kandi
quelle
3

Wenn Sie aus irgendeinem Grund kein .click()Checkbox-Element ausführen möchten (oder können) , können Sie den Wert einfach direkt über die Eigenschaft .checked (ein IDL-Attribut von) ändern<input type="checkbox"> ) .

Beachten Sie, dass dadurch das normalerweise verwandte Ereignis nicht ausgelöst wird ( Änderung ) nicht ausgelöst wird. Sie müssen es daher manuell auslösen, um eine vollständige Lösung zu erhalten, die mit allen verwandten Ereignishandlern funktioniert.

Hier ist ein Funktionsbeispiel in Roh-Javascript (ES6):

class ButtonCheck {
  constructor() {
    let ourCheckBox = null;
    this.ourCheckBox = document.querySelector('#checkboxID');

    let checkBoxButton = null;
    this.checkBoxButton = document.querySelector('#checkboxID+button[aria-label="checkboxID"]');

    let checkEvent = new Event('change');
    
    this.checkBoxButton.addEventListener('click', function() {
      let checkBox = this.ourCheckBox;

      //toggle the checkbox: invert its state!
      checkBox.checked = !checkBox.checked;

      //let other things know the checkbox changed
      checkBox.dispatchEvent(checkEvent);
    }.bind(this), true);

    this.eventHandler = function(e) {
      document.querySelector('.checkboxfeedback').insertAdjacentHTML('beforeend', '<br />Event occurred on checkbox! Type: ' + e.type + ' checkbox state now: ' + this.ourCheckBox.checked);

    }


    //demonstration: we will see change events regardless of whether the checkbox is clicked or the button

    this.ourCheckBox.addEventListener('change', function(e) {
      this.eventHandler(e);
    }.bind(this), true);

    //demonstration: if we bind a click handler only to the checkbox, we only see clicks from the checkbox

    this.ourCheckBox.addEventListener('click', function(e) {
      this.eventHandler(e);
    }.bind(this), true);


  }
}

var init = function() {
  const checkIt = new ButtonCheck();
}

if (document.readyState != 'loading') {
  init;
} else {
  document.addEventListener('DOMContentLoaded', init);
}
<input type="checkbox" id="checkboxID" />

<button aria-label="checkboxID">Change the checkbox!</button>

<div class="checkboxfeedback">No changes yet!</div>

Wenn Sie dies ausführen und sowohl auf das Kontrollkästchen als auch auf die Schaltfläche klicken, sollten Sie sich ein Bild davon machen, wie dies funktioniert.

Beachten Sie, dass ich der Kürze halber document.querySelector verwendet habe. Dies kann jedoch leicht so aufgebaut werden, dass entweder eine bestimmte ID an den Konstruktor übergeben wird, oder es kann auf alle Schaltflächen angewendet werden, die als Arienbezeichnungen für ein Kontrollkästchen dienen (beachten Sie, dass ich Ich habe mich nicht darum gekümmert, eine ID auf der Schaltfläche festzulegen und dem Kontrollkästchen eine Arie mit einem Etikett zu geben (was bei Verwendung dieser Methode erfolgen sollte) oder eine Reihe anderer Möglichkeiten, dies zu erweitern. Die letzten beiden addEventListenersind nur, um zu demonstrieren, wie es funktioniert.

Taswyn
quelle
2

Für eine einmalige Prüfung versuchen

myCheckBox.checked=1
<input type="checkbox" id="myCheckBox"> Call to her

für mehrere Versuche

Kamil Kiełczewski
quelle
2

Ich stimme den aktuellen Antworten zu, aber in meinem Fall funktioniert es nicht. Ich hoffe, dieser Code hilft jemandem in der Zukunft:

// check
$('#checkbox_id').click()
Udhav Sarvaiya
quelle