Hvordan man fremhæver valgte værdier på checkboxes og radio buttons
Hvad går det ud på?
Når man har en række valg som man skal klikke af, enten radio buttons eller checkboxes, kan det være en fordel, at fremhæve valgene f.eks. med fed skrift eller en anden tekstfarve. Dette kan man gøre ret let, med et lille JavaScript.
Hvordan man gør det
Løsningen, hvadenten det er radio buttons eller checkboxes, er den samme. INPUT tag'en skal udstyres med en værdi og et navn, og den del der skal fremhæves skal have en ID. På denne løsning bruger vi en tabel med INPUT i én celle og det fremhævede i en anden. Det er en rent kosmetisk ting for at gøre det overskueligt, det kan være en hver tag, der kan indeholde tekst og/eller billeder. Hvis man ville, kunne det også være billeder, hvor man ændrede størrelse, opacitet, ramme eller noget helt fjerde.
Udover type, navn og værdi, skal der også være et JavaScript til at udføre ændringen ved ONCLICK. Her kalder vi scriptet makeBoldRadioButton() ved radio buttons og makeBoldCheckbox() ved checkboxes. Koden for de to tabeller ser således ud:
De to functions der bliver kaldt, har jeg lagt i en ekstern script-fil kaldet BoldSelection.js. Hvis man hellere vil have den som et internt script, kan man selvfølgelig også gøre dette. Det er helt og aldeles et spørgsmål om personlig præference.
Scriptet med de to functions ser således ud:
Det som de to functions gør, er at definere to variabler, som er elementer med navnene Button og Box. Herefter løber rutinerne gennem elementerne i variablerne og ser efter om de er klikket af. Hvis de er klikket af, skrives de med fed skrift, eller sættes de til normal.
Tricket til at få det til at fungere er, at elementet der er klikket af har en værdi i attributten VALUE, som man sætter i enden af tekststrengen Button_ eller Box_, afhængig af om det er radio buttons eller checkboxes. Herved dannes det ID, f.eks. Button_1, som skal have fed skrift, og som man så finder med getElementById(). Alle andre elementer der hedder noget med Button_ eller Box_ plus et tal bliver sat til at de skal have normal skrift. På denne måde, er det underordnet om elementerne er celler i en tabel eller en DIV eller noget helt tredje, og man kan sagten kombinere flere elementtyper, hvis det skulle være aktuelt.
Det færdige resultat kommer til at se således ud:
Udover type, navn og værdi, skal der også være et JavaScript til at udføre ændringen ved ONCLICK. Her kalder vi scriptet makeBoldRadioButton() ved radio buttons og makeBoldCheckbox() ved checkboxes. Koden for de to tabeller ser således ud:
Hvem er det største sangtalent (kun muligt at vælge én)
<FORM>
<TABLE>
<TR><TD><INPUT TYPE="radio" NAME="Button" VALUE="1" ONCLICK="makeBoldRadioButton()"></TD><TD ID="Button_1">Elvis Presley</TD></TR>
<TR><TD><INPUT TYPE="radio" NAME="Button" VALUE="2" ONCLICK=" makeBoldRadioButton()"></TD><TD ID="Button_2">Freddy Mercury</TD></TR>
<TR><TD><INPUT TYPE="radio" NAME="Button" VALUE="3" ONCLICK="makeBoldRadioButton()"></TD><TD ID="Button_3">Johnny Cash</TD></TR>
<TR><TD><INPUT TYPE="radio" NAME="Button" VALUE="4" ONCLICK="makeBoldRadioButton()"></TD><TD ID="Button_4">Rick Ashley</TD></TR>
<TR><TD><INPUT TYPE="radio" NAME="Button" VALUE="5" ONCLICK="makeBoldRadioButton()"></TD><TD ID="Button_5">Whigfield</TD></TR>
</TABLE>
</FORM>
Hvem er det største sangtalent (muligt at vælge flere)
<FORM>
<TABLE>
<TR><TD><INPUT TYPE="checkbox" NAME="Box" VALUE="1" ONCLICK="makeBoldCheckbox()"></TD><TD ID="Box_1">Elvis Presley</TD></TR>
<TR><TD><INPUT TYPE="checkbox" NAME="Box" VALUE="2" ONCLICK=" makeBoldCheckbox()"></TD><TD ID="Box_2">Freddy Mercury</TD></TR>
<TR><TD><INPUT TYPE="checkbox" NAME="Box" VALUE="3" ONCLICK="makeBoldCheckbox()"></TD><TD ID="Box_3">Johnny Cash</TD></TR>
<TR><TD><INPUT TYPE="checkbox" NAME="Box" VALUE="4" ONCLICK="makeBoldCheckbox()"></TD><TD ID="Box_4">Rick Ashley</TD></TR>
<TR><TD><INPUT TYPE="checkbox" NAME="Box" VALUE="5" ONCLICK="makeBoldCheckbox()"></TD><TD ID="Box_5">Whigfield</TD></TR>
</TABLE>
</FORM>
<FORM>
<TABLE>
<TR><TD><INPUT TYPE="radio" NAME="Button" VALUE="1" ONCLICK="makeBoldRadioButton()"></TD><TD ID="Button_1">Elvis Presley</TD></TR>
<TR><TD><INPUT TYPE="radio" NAME="Button" VALUE="2" ONCLICK=" makeBoldRadioButton()"></TD><TD ID="Button_2">Freddy Mercury</TD></TR>
<TR><TD><INPUT TYPE="radio" NAME="Button" VALUE="3" ONCLICK="makeBoldRadioButton()"></TD><TD ID="Button_3">Johnny Cash</TD></TR>
<TR><TD><INPUT TYPE="radio" NAME="Button" VALUE="4" ONCLICK="makeBoldRadioButton()"></TD><TD ID="Button_4">Rick Ashley</TD></TR>
<TR><TD><INPUT TYPE="radio" NAME="Button" VALUE="5" ONCLICK="makeBoldRadioButton()"></TD><TD ID="Button_5">Whigfield</TD></TR>
</TABLE>
</FORM>
Hvem er det største sangtalent (muligt at vælge flere)
<FORM>
<TABLE>
<TR><TD><INPUT TYPE="checkbox" NAME="Box" VALUE="1" ONCLICK="makeBoldCheckbox()"></TD><TD ID="Box_1">Elvis Presley</TD></TR>
<TR><TD><INPUT TYPE="checkbox" NAME="Box" VALUE="2" ONCLICK=" makeBoldCheckbox()"></TD><TD ID="Box_2">Freddy Mercury</TD></TR>
<TR><TD><INPUT TYPE="checkbox" NAME="Box" VALUE="3" ONCLICK="makeBoldCheckbox()"></TD><TD ID="Box_3">Johnny Cash</TD></TR>
<TR><TD><INPUT TYPE="checkbox" NAME="Box" VALUE="4" ONCLICK="makeBoldCheckbox()"></TD><TD ID="Box_4">Rick Ashley</TD></TR>
<TR><TD><INPUT TYPE="checkbox" NAME="Box" VALUE="5" ONCLICK="makeBoldCheckbox()"></TD><TD ID="Box_5">Whigfield</TD></TR>
</TABLE>
</FORM>
De to functions der bliver kaldt, har jeg lagt i en ekstern script-fil kaldet BoldSelection.js. Hvis man hellere vil have den som et internt script, kan man selvfølgelig også gøre dette. Det er helt og aldeles et spørgsmål om personlig præference.
Scriptet med de to functions ser således ud:
function makeBoldRadioButton()
{
var radios = document.getElementsByName("Button");
for (var index = 0; index < radios.length; index++)
{
if (radios[index].checked)
{
document.getElementById("Button_" + radios[index].value).style.fontWeight='bold';
}
else
{
document.getElementById("Button_" + radios[index].value).style.fontWeight='normal';
}
}
}
function makeBoldCheckbox()
{
var boxes = document.getElementsByName("Box");
for (var index = 0; index < boxes.length; index++)
{
if (boxes[index].checked)
{
document.getElementById("Box_" + boxes[index].value).style.fontWeight='bold';
}
else
{
document.getElementById("Box_" + boxes[index].value).style.fontWeight='normal';
}
}
}
{
var radios = document.getElementsByName("Button");
for (var index = 0; index < radios.length; index++)
{
if (radios[index].checked)
{
document.getElementById("Button_" + radios[index].value).style.fontWeight='bold';
}
else
{
document.getElementById("Button_" + radios[index].value).style.fontWeight='normal';
}
}
}
function makeBoldCheckbox()
{
var boxes = document.getElementsByName("Box");
for (var index = 0; index < boxes.length; index++)
{
if (boxes[index].checked)
{
document.getElementById("Box_" + boxes[index].value).style.fontWeight='bold';
}
else
{
document.getElementById("Box_" + boxes[index].value).style.fontWeight='normal';
}
}
}
Det som de to functions gør, er at definere to variabler, som er elementer med navnene Button og Box. Herefter løber rutinerne gennem elementerne i variablerne og ser efter om de er klikket af. Hvis de er klikket af, skrives de med fed skrift, eller sættes de til normal.
Tricket til at få det til at fungere er, at elementet der er klikket af har en værdi i attributten VALUE, som man sætter i enden af tekststrengen Button_ eller Box_, afhængig af om det er radio buttons eller checkboxes. Herved dannes det ID, f.eks. Button_1, som skal have fed skrift, og som man så finder med getElementById(). Alle andre elementer der hedder noget med Button_ eller Box_ plus et tal bliver sat til at de skal have normal skrift. På denne måde, er det underordnet om elementerne er celler i en tabel eller en DIV eller noget helt tredje, og man kan sagten kombinere flere elementtyper, hvis det skulle være aktuelt.
Det færdige resultat kommer til at se således ud:
Hvem er det største sangtalent (kun muligt at vælge én)
Hvem er det største sangtalent (muligt at vælge flere)
Hvem er det største sangtalent (muligt at vælge flere)