First of all, this is not standard behavior of radio buttons, that you end user can deselect selected option.

Let's see quickly first, where to use radio buttons/ check boxes:

Radio buttons: Used when there are multiple options(mutually exclusive) and end user need to select only one option. Which lead to deselecting previous selected options, automatically after selecting an option. So, basically user can not deselect any selected option directly; To do that, they will need to select other available option/ choice.
Check boxes: Used when there are multiple options and end user may select one or multiple choices. Also, user can deselect any selected option, if they choose to.

But, some times requirement comes like, they want to select/ deselect radio buttons directly, which is obviously not standard behavior. So, below is a small Javascript(jQuery) code to achieve this:

<span>Radio button 1</span><input type="radio" name="radio1" /><br/>
<span>Radio button 2</span><input type="radio" name="radio2" /><br/>
<span>Radio button 3</span><input type="radio" name="radio3" /><br/>
<span>Radio button 4</span><input type="radio" name="radio4" /><br/>
<script type="text/javascript">
    (function (jQuery) {
        jQuery.fn.deselectableRadioButton = function() {
            return this.each(function() {
                jQuery(this).mousedown(function () {
                    jQuery(this).data('wasChecked', this.checked);

                jQuery(this).click(function () {
                    if (jQuery(this).data('wasChecked')) {
                        this.checked = false;


Radio button 1
Radio button 2
Radio button 3
Radio button 4
9 X 3
** To prevent abusing comments from publishing, posted comments will be reviewed and then published!
 Mritunjay Kumar
Works at Mindfire Solutions

I mostly work with C#, ASP.NET, MVC, WCF, Web API, Entity FrameWork, MS Sql.

More under this category...
Unflatten multi level array with native javascript.
All under this category...