Merging Checkbox and Radio Button Functionality
While coding a product-ordering form for a custom furniture company, I found I needed radio buttons with characteristics of both checkbox and radio button form fields.
The special-characteristics radio buttons were for the optional second wood (see further below).
On the one hand, no more than one radio button may be checked. On the other hand, tapping it a second time must uncheck the radio button.
This is a simplified live illustration of the functionality of that part of the order form.
Primary wood:
Optional second wood:
The above is live. Try it out. This is how it should work:
A Primary wood must be checked. It is done with a radio button so only one wood can be checked.
A second wood is optional. Because a second wood is checked with a radio button, no more than one can be checked. However, an additional feature is required. If the buyer checks a secondary wood and then decides they don't want a second wood, they must be able to uncheck the currently checked radio button.
To accomplish the additional requirement, the radio button acts like a checkbox when an already-checked radio button is tapped — it unchecks itself.
JavaScript is employed to merge the checkbox and radio button functionality.
Implementing This
Let's have a look at the form tag essentials and the JavaScript to enable the functionality. Then, the code for the entire illustration above is provided.
Here are the essential parts of the second-wood radio button fields.
<input type="radio" id="secondary-maple" name="secondary" onclick="SecondaryRadioButtonTapped(this)"> <input type="radio" id="secondary-hickory" name="secondary" onclick="SecondaryRadioButtonTapped(this)"> <input type="radio" id="secondary-cherry" name="secondary" onclick="SecondaryRadioButtonTapped(this)"> <input type="radio" id="secondary-walnut" name="secondary" onclick="SecondaryRadioButtonTapped(this)">
The onclick="SecondaryRadioButtonTapped(this)" attribute is in each radio button field. It calls the JavaScript when the radio button is tapped. When SecondaryRadioButtonTapped(this) is called with the "this" (no quotes) parameter, the parameter provides the identification of the button.
The name="secondary" is also in each radio button field. It ensures that only one radio button of the set can be checked at any one time.
The id attribute values for the radio buttons, however, are unique. They're colored blue, green, orange, and purple. The id value will be used by the JavaScript to see if the tapped radio button was already checked.
In essence, each radio button field gets the same name and onclick attribute values. And each gets a unique id attribute value.
Now, here is the JavaScript. Nothing needs to be customized — a simple copy and paste.
<script type="text/javascript">
var TheCheckedRadioButton = false;
function SecondaryRadioButtonTapped(d)
{
if( d.id == TheCheckedRadioButton )
{
d.checked = false;
TheCheckedRadioButton = false;
}
else { TheCheckedRadioButton = d.id; }
}
</script>
Put the JavaScript anywhere on your page where JavaScript can go. Down near the closing </body> tag would work.
With the radio button field attributes as indicated and the JavaScript on the page, the radio buttons should work like radio buttons and also like a checkbox when a checked item is tapped a second time.
The Entire Illustration Source Code
Here is the source code for the live illustration near the top of this article. For convenience, the coloring for the second-wood radio button fields is the same as in the above discussion. And the JavaScript is bolded.
<p> Primary wood: <br><label><input type="radio" id="primary-maple" name="primary" checked="checked"> Maple</label> <br><label><input type="radio" id="primary-hickory" name="primary"> Hickory</label> <br><label><input type="radio" id="primary-cherry" name="primary"> Cherry</label> <br><label><input type="radio" id="primary-walnut" name="primary"> Walnut</label> </p> <p> Optional second wood: <br><label><input type="radio" id="secondary-maple" name="secondary" onclick="SecondaryRadioButtonTapped(this)"> Maple</label> <br><label><input type="radio" id="secondary-hickory" name="secondary" onclick="SecondaryRadioButtonTapped(this)"> Hickory</label> <br><label><input type="radio" id="secondary-cherry" name="secondary" onclick="SecondaryRadioButtonTapped(this)"> Cherry</label> <br><label><input type="radio" id="secondary-walnut" name="secondary" onclick="SecondaryRadioButtonTapped(this)"> Walnut</label> </p> <script type="text/javascript"> var TheCheckedRadioButton = false; function SecondaryRadioButtonTapped(d) { if( d.id == TheCheckedRadioButton ) { d.checked = false; TheCheckedRadioButton = false; } else { TheCheckedRadioButton = d.id; } } </script>
If you have a project that requires a radio button to become unchecked when the button is tapped a second time, you now know how to do so.
(This article first appeared with an issue of the Possibilities newsletter.)
Will Bontrager
