Radio button

Hvordan anvendes et input i en radio-button

Fil:Js radio-button.PNG

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	Sekvens
PHP	Header - Include