Zum Inhalt

Javascript Radiobutton Deselector

Manchmal brauch man die Option, einen Radiobutton in HTML zu deselektieren und zwar so, dass kein Radiobutton mehr ausgewählt ist.

Dies kann man nur mit Javascript bewerkstelligen. Hierbei kann man nicht einfach in das onMouseDown / onMouseUp Event ein this.checked = false; reinschreiben, sondern muss mitführen, welchen Status ein Radiobutton vor dem aktuellen Klick hatte um somit sicherzustellen, dass hier keine falsche Ausgabe erscheint.

onMouseUp und onMouseDown kommen beide für diese Funktion nicht in Frage, denn sie lösen den Event noch vor dem eigentlich vom Browser ausgeführten Checked Statuswechsel aus. Somit siegt immer der Browser, selbst wenn wir vorher ein this.checked = false machen ist der Browser danach wieder dran und setzt und das Häckchen.

Für diese Funktion kommt nur der onClick Eventhandler in Frage. Dieser greift scheinbar erst nach dem Browser zu und ermöglicht uns das Setzen des Häckchens.
Für die Funktion müssen die Radiobuttons eine entsprechende ID aufweisen. Diese ID muss für die Radiobuttons eindeutig sein, sonst kann es zu Problemen beim deselektieren kommen.

Hier ist nun aber das Script:

Stichwörter: Javascript Java html radio radiobutton unselected unselect unfocused unfocus set radio checked status with javascript deselected deselect without reset

Published inCoding

Schreibe den ersten Kommentar

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

I accept that my given data and my IP address is sent to a server in the USA only for the purpose of spam prevention through the Akismet program.More information on Akismet and GDPR.

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.