Radio button

Hvordan anvendes et input i en radio-button

Eksempel på radio button

Radio buttons defineres som input type="radio", og de grupperes sammen ved at de har samme name.

Når de er grupperet med samme name, så tolker browseren det sådan at man kun kan vælge en af mulighederne, som vist her:

<form name="myForm" id="formular">
radio 1<input type="radio" value="1" name="inRadio" /><br />
radio 2<input type="radio" value="2" name="inRadio" /><br />
radio 3<input type="radio" value="3" name="inRadio" /><br />
radio 4<input type="radio" value="4" name="inRadio" /><br />

	<input type="button" onClick="testFormular();" value="Test formularen">
	<input type="reset" name="InRes" value="Reset" /><br />
</form>

input i radio-button med forslag til værdi

Man kan sætte en af værdierne på forhånd i HTML-koden ved at sætte en egenskab checked="checked" som vist her:

radio 1<input type="radio" value="1" name="inRadio" /><br />
radio 2<input type="radio" value="2" name="inRadio" /><br />
radio 3<input type="radio" checked="checked" value="3" name="inRadio" /><br />
radio 4<input type="radio" value="4" name="inRadio" /><br />

I programmeringssprog kaldes værdien for en default værdi.

Eksempel på anvendelse af input i en radio-button

For at finde hvilken mulighed der er valgt kan man løbe de forskellige muligheder igennem som vist herunder. Man skal dog også tage højde for at brugeren ikke har markeret en af knapperne.

function testFormular() {
	// Værdien af måden den modtages input på vises i en alert
	var ikke = true;
	var frm = document.getElementById("formular");
	// Da de ligger i et Array er vi nødt til at løbe dem igennem for at finde værdien
	for (n=0; n < frm.inRadio.length; n++) {
		if (frm.inRadio[n].checked) { 
			alert("Der er valgt noget i Radio-selecten");
			alert("Værdien af den valgte Radiobutten er: " + frm.inRadio[n].value);
			ikke = false;
		}
	}
	if (ikke) alert("Der er ikke valgt noget i Radio-selecten");
	
	// Formen resettes for brugeren
	myForm.reset();
}

Filen med koden kan hentes i en zip-fil

Webcode
JavaScript	for - while - do while - for in - løkke - løkker i løkker - if - if-else - else-if - Conditional - Switch - break - continue - Funktion - Return - Returværdi - Rekursion - Sekvens - Javascript strukturer
js Input	Checkbox - Dropdown - Form - Input button - Input filter - Input password - Input text - Textarea - submit knap - Option - Prompt - Confirm - Radio button - Select - Input-Tag - Keyboard event
js Output	Alert - Document.write - Frameset output - Objekt egenskaber - Objekt output - Text-felt til output - Vindue output - Billed egenskaber - Canvas
js Syntaks	Arrays - Betingelse - Identifyer - Variabel - Variabel scope - Type - Sekvens
js Objekt	Canvas - Billed egenskaber - Egne objekter - Events - HTML-objekter - Keyboard event - Event-handler - Browser detektering - Preload images - Document Object Model
Tid i JavaScript	Date objektet - setTimeout - setInterval
PHP	Header - Include