Two-dimensional radio buttons in JavaScript.
Version of Monday 9 November 2015.
Dave Barber's other pages.

This is a sample implementation of two-dimensional radio buttons in JavaScript. One application of such a control is to select a permutation.

The essential invariant is this: At any time, exactly one button in each row, and exactly one button in each column, will be in the selected state.

All the buttons of this example reside within the following HTML table at the bottom of which is a text summary of the selection, updated after every change.

  T U V W X Y Z
A
B
C
D
E
F
G

Here is some detail about happens when the user clicks a previously unselected button in row r and column c, more briefly written as the ordered pair (r, c):

All source code is in this one HTML file, which anyone may copy, modify and redistribute as desired.