Erster Wert von HTML-Kästchen zum Ankreuzen von Onclick/Onchange Ereignissen

Question

<input type="checkbox" onclick="onClickHandler()" onchange="onChangeHandler()" /> 

Von innerhalb onClickHandler und/oder onChangeHandler, wie kann ich, ob der neuen Zustand der Checkbox bestimmen?

Answer 1

Die kurze Antwort:

die click Ereignis verwenden, die bis nicht ausgelöst wird, nachdem der Wert aktualisiert wurde, und wird ausgelöst, wenn Sie es wollen:

<label><input type='checkbox' onclick='handleClick(this);'>Checkbox</label> 

function handleClick(cb) { 
    display("Clicked, new value = " + cb.checked); 
} 

Live example | Source

Die längere Antwort:

Die change Event-Handler nicht, bis der checked Zustand aktualisiert wurde aufgerufen (live example | source), sondern weil (wie Tim Büthe in den Kommentaren weist darauf hin) IE doesn Das Ereignis change wird nicht ausgelöst, bis das Kontrollkästchen den Fokus verliert. Sie erhalten die Benachrichtigung nicht proaktiv. Schlimmer noch, mit IE, wenn Sie ein Label für das Kontrollkästchen (anstatt das Kontrollkästchen selbst), um es zu aktualisieren, können Sie den Eindruck bekommen, dass Sie den alten Wert erhalten (versuchen Sie es mit IE hier durch Klicken auf das Label: live example | source). Wenn das Kontrollkästchen den Fokus hat, wird durch Klicken auf die Beschriftung der Fokus entfernt und das Ereignis change wird mit dem alten Wert ausgelöst, und dann wird click ausgeführt, wobei der neue Wert festgelegt und der Fokus wieder auf das Kontrollkästchen gesetzt wird. Sehr verwirrend.

Aber Sie können alle diese Unannehmlichkeiten vermeiden, wenn Sie stattdessen click verwenden.

Ich habe verwendet Dom0-Handler (onxyz Attribute), weil das ist, was Sie gefragt, aber die Ordnung halber, würde ich in der Regel empfehlen Handler in Code Einhaken (DOM2 die addEventListener oder attachEvent in älteren Versionen von IE) anstatt onxyz Attribute. Dadurch können Sie mehrere Handler an dasselbe Element anhängen und vermeiden, dass alle Handler globale Funktionen ausführen.

---

Eine frühere Version dieser Antwort verwendet diesen Code für handleClick:

function handleClick(cb) { 
    setTimeout(function() { 
    display("Clicked, new value = " + cb.checked); 
    }, 0); 
} 

Ziel auf dem Wert zu sein schien, bevor Sie sich füllen Sie bitte den Klick zu ermöglichen. Soweit ich weiß, gibt es keinen Grund, das zu tun, und ich habe keine Ahnung, warum ich das getan habe. Der Wert wird geändert, bevor der Handler click aufgerufen wird. In der Tat ist die Spezifikation quite clear about that. Die Version ohne setTimeout funktioniert einwandfrei in jedem Browser, den ich ausprobiert habe (sogar IE6). Ich kann nur davon ausgehen, dass ich über eine andere andere Plattform nachdachte, wo die Änderung erst nach dem Ereignis erfolgt. In jedem Fall kein Grund, dies mit HTML-Checkboxen zu tun.

Answer 2

verwenden

<input type="checkbox" onclick="onClickHandler()" id="box" /> 

<script> 
function onClickHandler(){ 
    var chk=document.getElementById("box").value; 

    //use this value 

} 
</script>