I always wondered why is it not possible to uncheck a radio button? Sometimes this is very inconvenient. If at first all radio buttons on the page were unchecked then why the browser does not allow a user to uncheck a radio button after it was checked?
So, anyway, with a very simple javascript (radioObj.checked = false) it is very easy to achieve.
See how it works in this short video in which I show how I defeated radio buttons:
QuickTime movie (785 Kb).
Updated two and a half years later.
The original version of the code that I posted in the comments didn’t actually work correctly in a situation when a group of radio buttons had the same name (which is of course the most common use scenario for radio buttons, but I happened to call them differently originally when I’ve created the unchecking code).
So here is a fixed version of the code (as it appears the click event only is not enough for this to work correctly, we have to assign a handler to a mousedown event as well).
Pure JS version
<input type="radio" name="name" value="value"
onmousedown="this.__chk = this.checked"
onclick="if (this.__chk) this.checked = false"/>jQuery version
If you are using jQuery on your site then this version is for you, it will make ALL radio buttons uncheckable on the page, no need to specify any special code in each radio button.
Just place this code in the HEAD of your page, after jQuery main library inclusion and you are set –
<script type="text/javascript">
$(document).ready(function() {
$("input[type=radio]“).bind(”mouseup”, function() {
this.__chk = this.checked;
}).bind(”click”, function() {
if (this.__chk) this.checked = false;
});
});
</script>
The reason you can’t uncheck a radio button is that their purpose is to always have something selected at the end.
Having all radio buttons unchecked in the beginning is not a good practice.
And if you want to offer the user the option to not select anything, just add another radio button that says ‘None’.
This is the way it is intended to be used. Straying from the standard UI behaviour will only make it harder for your users.
Boris,
I always thought the purpose of a radio button is to force a user to choose only one option out of all possible. This is contrary to how checkboxes work, no? You can have multiple checkboxes ticked in a set, but only one radio button.
I am still not sure why it is not possible to deselect a radio button by default in the browser.
The option of ‘None’ that you mention looks like a workaround for the default inconvenient behaviour of radio buttons.
Having said that, I completely agree that it is not a good practice to do something that a user doesn’t expect.
Could you post an example?
<input type=”radio” name=”name” value=”value” onclick=”this.__chk = this.__chk ? this.checked = !this.__chk : this.checked”>
This works good for one radiobutton, but what about more?
This works for any number of radio buttons.
Thanks you Sergey Smirnov !!!
Works very good for a lot radio buttons,
Thanks!!
Thank you Sergey!
This has saved me hours of frustration.
Just “one little thing.” :)
Let’s say you’re doing some server-side validation of the input data and returning the data back to the form if there any errors. It appears that checked radio buttons lose their “check” when the data is returned … even if I append ‘checked’ to the end of the radio tag.
Any way to modify your excellent javascript to account for this?
Thanks again!
Bill,
Look for a problem in your code. The javascript above only goes into play when you click on the radio button (it is assigned to an onclick event). So it doesn’t influence the initial state of the radio button. It could be checked or unchecked — as you wish.
Thanks for this!
One thing that radio button has in advantage over the checkboxes is that the form sends their data only if they are checked. Thanks to your method I can use my form to create a nice and clean order form.
Ernest
Here is the same approach, but with less code inside the radio button itself.
This is a script part that you put in the HEAD of your page:
<script type=”text/javascript”>
function toggleRadio(rObj) {
if (!rObj) return false;
rObj.__chk = rObj.__chk ? rObj.checked = !rObj.__chk : rObj.checked;
}
</script>
And here is how the radio button itself starts to look:
<input type=”radio” name=”name” value=”value” onclick=”toggleRadio(this)”>
I just googled “uncheck a radio button” and in less than 5mins I have the result I am after. Thanks for saving me hours!
Dave
I looked around for another option because my code, which was using “onmousedown”, wasn’t behaving with the element.
This works quite well and is also much more compact.
Thanks
thank you very much sir
I tried this and it works pretty well, but I am getting one odd bug and was wondering if anyone else sees it. I have a group of three radio buttons, and if I unclick a button, then click another button, then click the first button again, the first button is still in the unchecked state.
Order of events:
Click button 1 — checked
Click button 1 — unchecked
Click button 2 — checked
Click button 1 — unchecked (should now be checked)
Thanks Sergey! Great bit of code.
Thanks so much for this - does exactly what it says on the tin!!
:)
Just what I was looking for, perfect. Thanks Sergey!
Nice. Thanks for this code. I have always felt this was an annoyance as well.
Thanks Sergey. But I have the same bug as Jason. Maybe someone have a workaround for it?
Jason and Artem, you were both right. The code that I’ve provided in the comments didn’t work correctly when a group of radio buttons had the same name.
I’ve posted the fixed version as an update to my original blog post. Please see above.
Hi there, I couldn’t get this working (this.__chk was undefined) but I employed another approach that works for me without needing to handle mousedown event:
This is the definition of the radiobutton:
Where the ToggleRadioButton has the follwowing implementation:
var lastSelected;
function ToggleRadioButton(rb)
{
if(!lastSelected || lastSelected != rb)
{
rb.checked = true;
lastSelected = rb;
}
else
{
rb.checked = false;
lastSelected = null;
}
}
You may want to amend this if you are trying to have it more than 1 set of radio buttons, but it should be an easy anyway.
Thanks for the great post,
Sidar
Can you please tel me what “__chk” means in “this.__chk”?
Swetha,
“__chk” is just a property name in “this” object. It stores the current state of the radio button and I have come up with a name myself, you can give it any other name you want, basically.
Спасибо, все работает просто замечательно! 8)
Thanks for the clarification. But i still have a confusion. How come “__chk” acts as a property in “this” object and stores the current state? I have explored through google and i have’nt found such a property in javascript. Can you please explain me in detail if you dont mind?
Thanks,
Swetha.
Swetha,
I create this property myself and assign a value of a standard “checked” to it, like this:
this.__chk = this.checked
OK. So you mean that we can create our own properties using __(underscoreunderscore)
Underscore is not required, “this.chk” would have worked too.
My doubt is cleared now. Thank you so much.