How can I make a checkbox toggle its state when a user clicks on the text associated with it?
Consider a checkbox that might occur, for example, on a software download form:Note that the checkbox can be toggled by clicking on the box itself, but not by clicking on the associated text.
It is probably safe to say that most people who use computers on a regular basis have been generously exposed to the dialog boxes (a.k.a. "pop-up boxes") that appear in graphical user interfaces (GUIs) such as Microsoft Windows. Because of this, there is an unconscious tendency for users to rely on their experience with dialog box components as they interact with forms in a web browser.
 |
One thing that annoys me about web forms is that the behavior of widgets (check boxes, push buttons, etc.) in web forms differs from the behavior of widgets in other dialog boxes.
For example, if the "Please keep me informed of updates." checkbox shown above were to appear in a normal dialog box -- and not in a web form -- then users would probably be able to toggle the checkbox's state not only by clicking on the box, but also by clicking on the text associated with and adjacent to the box.
Believe it or not, the fact that this feature is present in the dialog boxes of most GUIs, but not in your web forms, catches many users by surprise. Whether you are a perfectionist or you desire to build 100% user-friendly web forms, you should consider using JavaScript to make your form's widget descriptions clickable.
Users who have a hard time aiming with the mouse -- and probably a few clumsy-fingered laptop touchpad users -- will definitely appreciate your extra effort.
Here is my solution to the problem:
Make the text associated with the checkbox (or radio button) a JavaScript-protocol hyperlink, so that when the text is clicked, a JavaScript function is executed that toggles the checkbox.Try my simple, yet elegant prototype (shown below). Click on the text -- not the checkbox -- and see what happens!
Pretty slick, don'tcha think? The HTML/JavaScript for this example is extremely simple. The portions that were added for the purpose of making the checkbox clickable are shown below, in red type:
<script>
function toggle_checkbox (checkbox)
{
checkbox . checked = ! checkbox . checked;
}
</script>
<form name=f>
<input type=checkbox name=c>
<a href="javascript:toggle_checkbox (document . f . c);">
Please keep me informed of updates.
</a>
</form>
toggle_checkbox is called. The parameter is a reference to the checkbox object. toggle_checkbox is a relatively straight-forward function. It reads the boolean state of the checkbox and inverts it. (Because this function can be used for all checkboxes, the overhead of adding it to your web page is incurred only for the first checkbox.)
I used the tags <font color=black> and </font> to avoid tricking the user into believing that the text is a hyperlink to another document. This is, of course, a matter of preference and not strictly necessary.
If extending the functionality of form elements is this simple, why aren't more people doing it? It's probably because they never thought it was possible. But now you know better. So go forth, and make easier-to-use web forms!
Charlton Rose
30 Jan. 1997