Radiobuttons en Checkboxen
Aankruis-vakjes (checkboxen) en keuze-rondjes (radio-buttons) worden veel gebruikt in formulieren voor het maken van keuzes.
Een set radio-buttons gebruik je om één enkele keuze te laten maken uit meerdere mogelijkheden.
Een voorbeeld van zo'n keuze is de kleur van een auto. Daar is er -normaal gesproken- maar één van.
Je hebt altijd minstens twee radio-buttons nodig om te kunnen kiezen.
Checkboxen gebruik je om de aanwezigheid van bepaalde eigenschappen mee aan te geven. Bij voorbeeld: De auto
is al of niet voorzien van ABS, radio/CD-speler, stuurbekrachtiging, trekhaak, enz.
Hier vind je een beschrijving hoe je dit kunt aanpakken. De code van de hier getoonde voorbeeld kan worden gedownload, om aan te passen voor eigen gebruik.
- Er worden twee items besproken:
- Checkboxen.
- Radio-buttons.
- List-boxen worden hier niet behandeld. Kijk daarvoor bij het item Listbox met links.
Hier zie je een eenvoudig formulier met twee kolommen. Links een set radio-buttons waarmee uit een aantal
kleuren kan worden gekozen. Rechts een aantal accessoires die al of niet aanwezig zijn.
Met de knop "Tonen" start je een JavaScript-functie die de gemaakte keuzes op het scherm toont
in een alert. De knop "Overnieuw" zet het formulier terug in zijn oorspronkelijke toestand.
De kaders zijn gemaakt met een <table>, waarbij gebruik gemaakt is van rules en
frame. Dit wordt elders op deze site beschreven.
De complete code van het formulier zelf staat hieronder. Je kunt hem ook downloaden.
De radiobuttons en checkboxen worden nader toegelicht in aparte hoofdstukken.
<div align="center"><form name="Demo">Merk op dat de <form>-tag geen action= en method= attributen heeft. Die zijn voor een "lokaal" formulier niet nodig.
<tr><td align="center" colspan="2" class="Kop2">Mijn ideale auto</td></tr>
<tr>
<td align="center"><b>Kleur</b></td>
<td align="center"><b>Accessoires</b></td>
</tr>
<tr valign="top"><td>
<input type="radio" name="Kleur" value="Rood" checked>Rood<br>
<input type="radio" name="Kleur" value="Groen">Groen<br>
<input type="radio" name="Kleur" value="Blauw">Blauw<br>
<input type="radio" name="Kleur" value="Geel">Geel<br>
<input type="radio" name="Kleur" value="Wit">Wit<br>
<input type="radio" name="Kleur" value="Anders">Andere kleur
</td><td>
<input type="checkbox" name="acc"
value="ABS" checked>ABS<br>
<input type="checkbox" name="acc"
value="Trekhaak" checked>Trekhaak<br>
<input type="checkbox" name="acc"
value="Radio/CD-speler">Radio/CD-speler<br>
<input type="checkbox" name="acc"
value="Stuurbekrachtiging">Stuurbekrachtiging<br>
<br>
<input type="checkbox" name="geen" value=""
onClick="ResetAndere()">Geen accessoires
</td></tr>
<tr><td align="center" colspan="2">
<input type="button" name="DoeHet" value="Tonen"
onClick="DemoActie()">
<input type="reset" name="NietDoen" value="Overnieuw">
</td></tr>
</table></form></div>
Het aanklikken van de knop "Overnieuw" roept een reset-functie aan, waardoor het formulier in zijn oorspronkelijke toestand terugkomt.
Als je het vakje Geen accessoires aanvinkt, worden alle andere vakjes uitgeschakeld. Dat gebeurt door de functie ResetAndere(), die wordt geactiveerd door het event onClick.
Door een druk op de knop "Tonen" wordt de functie DemoActie() aangeroepen. Deze stelt aan de hand van de status van de radiobuttons en de checkboxen een string str samen. Deze string wordt met window.alert(str) op het scherm getoond.
Bij het samenstellen van str wordt gebruik gemaakt van "\n". Een beschrijving van deze zg. escape-karakers is te vinden in het item Werken met Strings.
De JavaScripts zien er als volgt uit (deze staan in de <HEAD>):
<script>
<!--
function ResetAndere(){ /* Zet checkboxen in array 'acc' uit */
for (i=0; i<document.Demo.acc.length; i++)
document.Demo.acc[i].checked = false;
}
function DemoActie() { /* Geef alert met resultaten */
var str = 'Mijn ideale auto:\n\n';
var kll = document.Demo.Kleur.length-1;
for (i=0; i<kll; i++) /* loop over de kleuren */
if (document.Demo.Kleur[i].checked)
str += 'Kleur: ' + document.Demo.Kleur[i].value + '.\n\n';
if (document.Demo.Kleur[kll].checked) /* Andere kleur */
str += 'Kleur: Staat niet in de lijst.\n\n';
str += 'Accessoires:\n';
if (document.Demo.geen.checked) /* Geen accessoires */
str += 'Niet nodig...\n';
else { /* Lijst van ideale accessoires */
kll = document.Demo.acc.length;
for (i=0; i<kll; i++)
if (document.Demo.acc[i].checked)
str += document.Demo.acc[i].value + '\n';
}
window.alert(str);
}
// Einde van dit script -->
</script>
Radio-buttons
Radiobuttons worden gebruikt voor het maken van een unieke keuze uit een lijst. Dat wil zeggen: er is maar één keuze mogelijk. Voor niet-unieke keuzes uit een lijst gebruik je checkboxen.
Een radiobutton maak je met de de tag:
<input type="radio" name="..." value="...">TekstDe attributen type="radio" en name="..." zijn verplicht, anders kun je er niets mee doen. Het attribuut value="..." heb je nodig als je behalve de checked-status meer gegevens mee wil sturen. De Tekst die direct volgt na de tag wordt alleen op het scherm gezet. Je kunt er niet aan refereren. Daarvoor gebruik je value. Het is vaak zinvol om value en Tekst gelijk aan elkaar te maken.
Om radiobuttons zinvol te kunnen gebruiken heb je een array nodig van tenminste twee items.
Je maakt zo'n array door meerdere radiobutton-tags met dezelfde naam in het formulier te zetten.
Elke button heeft een eigenschap checked. Bij het button dat "aan" staat is checked
gelijk aan true, anders false.
Om het aantal radiobuttons te tellen gebruik je de array-eigenschap length:
var aantal = document.Formulier_naam.Radiobutton-array_naam.length;In het voorbeeld is dat dus: var kll = document.Demo.Kleur.length;
Je kunt nu heel snel uitzoeken welke button er "aan" staat met een eenvoudige lus:
for (i=0; i<kll; i++)Merk op dat de lus begint bij nul. In JavaScript beginnen arrays nl. bij nul te tellen. Daarom loopt de lus ook zolang i kleiner is dan het aantal elementen in de array. Het hoogste element-nummer in de array is gelijk aan het aantal elementen - 1.
if (document.Demo.Kleur[i].checked) { opdrachten }
Als de lijst van radio-buttons erg lang is kan het handig zijn om uit de for-loop te breken met break.
Om het nu een beetje moeilijker te maken: in het voorbeeld wordt de laatste radiobutton
anders afgehandeld dan de rest. Daarom staat er: var kll = document.Demo.Kleur.length-1;. Voor de rest van
de functie heeft dat geen invloed.
Omdat bij het laatste element er niet door de functie DemoActie() wordt gerefereerd aan value,
zou deze kunnen worden weggelaten.
Checkboxen
Checkboxen worden gebruikt voor het maken van een niet-unieke keuze uit een lijst. Dat wil zeggen:
er zijn meerdere keuzes mogelijk. Voor unieke keuzes uit een lijst gebruik je radiobuttons.
Het is mogelijk om een checkbox als enkel, losstaand item te gebruiken. In het voorbeeld zijn beide methodes
gebruikt.
Een checkbox maak je met de de tag:
<input type="checkbox" name="..." value="...">TekstEen serie checkboxen in een array maak je op dezelfde manier als een serie radiobuttons. Je kunt ze op dezelfde manier afhandelen; hierbij gebruik je de eigenschappen length en checked. Merk op dat er meerdere boxen in een array "aan" kunnen staan. De hele array moet dus worden nagekeken.
Een enkele checkbox gebruik je op dezelfde manier als een array. De eigenschap length is niet beschikbaar. Gebruik er van levert hier undefined op.
In het voorbeeld heeft de checkbox met name="geen" geen waarde voor value. Dat is niet nodig omdat deze niet wordt gebruikt.
Downloaden:
Druk op de knop:
File: voorb043.zip, 1408 bytes.
