CODEWITHSUNDEEP
htmlradio-button
Kevin Brown
Kevin Brown

Reputation: 12650

Make radio buttons "checkable": HTML

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.

Upvotes: 3

Views: 1297

Answers (4)

Ray
Ray

Reputation: 21905

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

Upvotes: 2

Benry
Benry

Reputation: 5298

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.

Upvotes: 1

Samuel Neff
Samuel Neff

Reputation: 74949

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.

Upvotes: 12

Pik&#39;
Pik&#39;

Reputation: 7097

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...

Upvotes: 3

Related Questions