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.

• Whenever the user clicks on a button that is not already selected, it becomes selected, and three other buttons are automatically modified in order to maintain the invariant.
• Whenever the user clicks on a button that already is selected, nothing happens.

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.

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):

• Let c* represent the column in which row r's previously-selected button lay.
• Let r* represent the row in which column c's previously-selected button lay.
• The previously-selected buttons, now automatically deselected, are (r*, c) and (r, c*).
• The new button selected by the user is (r, c). The other new button, automatically selected, is (r*, c*).

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