How to check/uncheck radio button on click?

Question

I want to be able to uncheck a radio button by clicking on it.

So, if a radio button is unchecked, I want to check it, if it is checked, I want to uncheck it.

<

Answer 1

I know this question is old, but I just came across this problem and decided to have a go myself and didn't want to use a modifier button like ctrl.

See fiddle at http://jsfiddle.net/ArktekniK/yhbw469f/ For toggling a radio button by clicking on the radio button itself

$('input[type=radio]').on('mousedown', function(e){
  var wasChecked = $(this).prop('checked');
  this.turnOff = wasChecked;
  $(this).prop('checked', !wasChecked);
});

$('input[type=radio]').on('click', function(e){
  $(this).prop('checked', !this.turnOff);
  this['turning-off'] = !this.turnOff;
});

For toggling a radio button by clicking on the label or radio button itself

$('label:has(input[type=radio])').on('mousedown', function(e){
  var radio = $(this).find('input[type=radio]');
  var wasChecked = radio.prop('checked');
  radio[0].turnOff = wasChecked;
  radio.prop('checked', !wasChecked);
});

$('label:has(input[type=radio])').on('click', function(e){
  var radio = $(this).find('input[type=radio]');
  radio.prop('checked', !radio[0].turnOff);
  radio[0]['turning-off'] = !radio[0].turnOff;
});

Answer 2

 var checked = {};
    $('.desectable-radio').each(function (index) {
        checked[index] = this.checked;
        $(this).click(function () {
            if (checked[index])
                this.checked = false;
            for (var i in checked) {
                checked[i] = false;
            }
            checked[index] = this.checked;
        });
    });

Answer 3

Needing a solution to this issue, I settled on replacing the currently active radio button with a ‘cancel’ icon button, like this http://fontawesome.io/icon/ban/

Clicking this icon unchecked the active radio button, which then reappeared, effectively resetting the radio button group. The cancel icon was also removed from the DOM.

Alternatively the user could click another of the radio buttons in the group, which would behave as normal aside from the cancel button, which was then ‘moved’ to replace the new active radio button.

This kept the cancel icon in an intuitive location (i.e. where the user last clicked) and was safer than assuming the user would know to re-click the currently active radio button to deactivate the group.

Worst case if you have a long list of radio buttons, the user just has to click any of them twice to clear the group.

Answer 4

If there is only one radio button you needs to use checkbox instead.

There is no meaning to having one radio button they works with group.

probably you are looking for checkbox control.

Answer 5

Found this somewhere while looking for a solution, do like the simplicity of it...

var checkedradio;
function docheck(thisradio) {
    if (checkedradio == thisradio) {
        thisradio.checked = false;
        checkedradio = null;
    }
    else {checkedradio = thisradio;}
}

Use with:

<input type='radio' onclick='docheck(this);'>

It does seem to require a double click to deselect when you have multiple radio groups in a form though, but this could by solved by having a function for each group I suppose...

Answer 6

I think this is the shortest way. I tested it on Chrome and MS Edge.

$(document).on('click', 'input:radio', function () {
    var check = $(this).attr('checked')
    if (check) $(this).removeAttr('checked').prop('checked',false)
    else $(this).attr('checked', true).prop('checked',true)
})

This piece of code also works on AJAX loaded contents.