Why is it impossible to deselect HTML "radio" inputs?

In HTML, there are currently two types of "checkbox" style controls:

  • Checkbox: Allows toggling on/off, multiple values can be selected
  • Radio: Only one value in a group may be selected, does not allow toggling off individual inputs

If anything is unclear, see demo: http://jsfiddle.net/GYU8n/

My beef is with radios, and the inability to "uncheck" them (which is the default behavior in all browsers as far as I know). We just had an issue with one of our clients insisting that we need to get rid of the "Not Applicable" radio option on a form, but the field is not required.

Here's the problem: If someone selects a radio option, perhaps by misclick, there's no way out unless a "blank" option is provided (wording irrelevant). Very much like a dropdown box that does not have a blank option, but the difference is that a dropdown box doesn't take up more room in the UI whether it has 2 options or 20. Having the selectable values already present on the screen, without the extra click that the dropdown needs, is great - so we use radios all the time.

I cannot comprehend why the radio type inputs cannot be toggled off by clicking the input, and why this behavior is the default. Clicking a different option is the only way to deselect the current one, but it's very likely that none of the options are required or applicable, so once a value is selected - a selection is "locked in", regardless of which one it is.


My Questions

  1. Surely this behavior is deliberate and took a room full of experts to agree upon, but what could those reasons possibly be?

  2. I'm thinking of going against the grain and writing some JavaScript to change this behavior, by default, for all future applications that I write. Is there any reason why I shouldn't?

  3. Do non-techie users even have an expectation of how radios work?

  4. Is it likely that people are trying to deselect radio options by clicking them again, expecting a toggle, and getting frustrated?


Example

Look at this mockup: http://jsfiddle.net/f4vXj/1/

How could this be changed to appear the same way with all options visible, using checkbox style controls and not require an empty radio that itself will require a label like N/A or I don't want to fill in this field?

If someone clicks the wrong option by accident, they're locked in to selecting one of the options.

Tags: