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:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

var radioStatus = new Array( );

function checkRadioState( obj )
{
if ( typeof radioStatus[ obj.id ] == 'undefined' ){
for ( x in radioStatus )
{
radioStatus[ x ] = false;
}
radioStatus[ obj.id ] = true;
}else{
if ( radioStatus[ obj.id ] == true ) {
obj.checked = false;
radioStatus[ obj.id ] = false;
}else{
for (x in radioStatus)
{
radioStatus[ x ] = false;
}
radioStatus[ obj.id ] = true;
}
}
}

1
2
3
4
5
6
7

 Radio 1

 Radio 2

 Radio 3

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