How to highlight selections on checkboxes and radiobuttons
What is it all about?
When you have a number of options you can select from, either radiobuttons or checkboxes, it can be beneficial to highlight the selected values, e.g. using bold types or another text color. This can be done quite easily, using a small JavaScript.
How it is done
The solution, whether it is radiobuttons or checkboxes, is the same. The INPUT tag has to be equipped with a value and a name, and the part being highlighted needs to have an ID. For this solution, we use a table with INPUT in one cell and the highlighted part in another. It is done like this solely for cosmetic purposes, in order to make thing clearer, it can be any tag that can contain text and/or images. If you wanted to, it could also be images changing size, opacity, border, etc.
Besides type, name and value, you also need a JavaScript for carrying out the changes at ONCLICK. Here we have named the script makeBoldRadioButton() for the radiobuttons and makeBoldCheckbox() for checkboxes. The code for the two tables looks like this:
The two functions being executed, I have placed in an external script file named BoldSelection.js. If you prefer to have as an internal script, you can of course do this instead. It is entirely a matter of personal preferences.
The script with the two functions looks like this:
What the two functions do, is to define two variables, that are elements with the names Button and Box. After this the routines parse the elements in the variables, to see if they are checked or not. If they are checked, they are written in bold, otherwise they are set to normal.
The trick to make it work, is that the checked element has a value in the attribute VALUE, being added to the end of the text string Button_ or Box_, depending on whether it is radiobuttons or checkboxes. This creates the ID, e.g. Button_1, for which to use bold typeface, which is then found by using getElementById(). All other elements called Button_ or Box_ plus a number, is set to have normal typeface. This way, it doesn't matter if the elements are cells in a table or a DIV or some other tag, and you can combine several element types, without any problems, should you desire to do so.
The finished result will look like this:
Besides type, name and value, you also need a JavaScript for carrying out the changes at ONCLICK. Here we have named the script makeBoldRadioButton() for the radiobuttons and makeBoldCheckbox() for checkboxes. The code for the two tables looks like this:
Who is the best singer (you can only pick one)
<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>
Who is the best singer (you may pick more than one)
<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>
Who is the best singer (you may pick more than one)
<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>
The two functions being executed, I have placed in an external script file named BoldSelection.js. If you prefer to have as an internal script, you can of course do this instead. It is entirely a matter of personal preferences.
The script with the two functions looks like this:
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';
}
}
}
What the two functions do, is to define two variables, that are elements with the names Button and Box. After this the routines parse the elements in the variables, to see if they are checked or not. If they are checked, they are written in bold, otherwise they are set to normal.
The trick to make it work, is that the checked element has a value in the attribute VALUE, being added to the end of the text string Button_ or Box_, depending on whether it is radiobuttons or checkboxes. This creates the ID, e.g. Button_1, for which to use bold typeface, which is then found by using getElementById(). All other elements called Button_ or Box_ plus a number, is set to have normal typeface. This way, it doesn't matter if the elements are cells in a table or a DIV or some other tag, and you can combine several element types, without any problems, should you desire to do so.
The finished result will look like this:
Who is the best singer (you can only pick one)
Who is the best singer (you may pick more than one)
Who is the best singer (you may pick more than one)