Make radio buttons "checkable": HTML

Question

How do I make radio buttons operate more like a check box? I need the function of a radio button, but it needs to be able to be de-selected.

Answer 1

You could make a "none" option, or create a javascript button to unselect every radio button. I wonder if the onclick event of a radio button react if it is already selected...

Answer 2

Usually this is accomplished by adding another option, "None". Users would not expect that clicking a selected radio button will deselect it since that's not normal behavior.

Another option, not often used anymore, is a "clear" button. I don't like this option though.

Answer 3

You could add an onClick function to each radio button that would de-select it if it was clicked while selected (haven't tried it, but it seems reasonable). This is really unexpected behavior for most users though - I think the other answers suggesting a 'None' option are better.

EDIT: Just for fun, I tried this out. It works. My code is pretty cheesy - done just for a quickie test.

<script>
  var x = false;
</script>

<input type="radio" value="test 1" name="1" onmousedown="if (this.checked) { x = true; }" onclick="if (x) {this.checked = false; x = false; return true;}" />1
<input type="radio" value="test 2" name="1" onmousedown="if (this.checked) { x = true; }" onclick="if (x) {this.checked = false; x = false; return true;}" />2
<input type="radio" value="test 3" name="1" onmousedown="if (this.checked) { x = true; }" onclick="if (x) {this.checked = false; x = false; return true;}" />3

Answer 4

You can use the "none" option as suggested by others. If that is not acceptable your other options are:

1. Check boxes with logic to accept only one selection.
2. A list box that only allows single selections.