Double-selection radio buttons in JavaScript.
Version of Tuesday 10 November 2015.
Dave Barber's other pages.
This is a sample implementation of double-selection radio buttons in JavaScript. With ordinary radio buttons, exactly one option is in the selected state at any time. By contrast, with double-selection buttons exactly two options are in the selected state at any time.
The two selected buttons are designated older and newer:
- When an unselected button is clicked, it becomes the newer button and is selected. What had been the newer button becomes the older, and remains selected. What had been the older button is automatically deselected.
- If the older button (which is already selected) is clicked, the newer and older buttons are exchanged, although this does not affect which buttons are currently selected.
- If the newer button (which is already selected) is clicked, nothing happens.
The extension to triple-selection buttons, although not presented here, is straighforward.
All source code is in this one HTML file, which anyone may copy, modify and redistribute as desired.