Uncheck radiobutton

Question

<input  type="radio" name="things" value="exam" />  exam
<input  type="radio" name="things" value="journey" /> journey


$("input[name=things]").click(function(){
    if($(this).is(':checked')){
        $(this).removeAttr('checked')
    }
})

This doesn't work. How can I make it work? Here is how I would like it to run: if I click on selected input, then this should be unselected, but if I click on unselected input, then this should be checked and uncheck the others input.

LIVE: http://jsfiddle.net/syH46/

http://stackoverflow.com/a/6246260/55209 and http://stackoverflow.com/questions/2589052/how-to-uncheck-a-radio-button — Artem Koshelev, Feb 28 '12 at 11:17
possible duplicate of [How to check/uncheck radio button on click?](http://stackoverflow.com/questions/4957207/how-to-check-uncheck-radio-button-on-click) — Shadow The GPT Wizard, Feb 28 '12 at 11:19
Hi are you saying that if you click on the text exam or journey the corresponding input should be selected or unselected? — Kosmosniks, Feb 28 '12 at 11:20
possible duplicate of [JQuery How to Uncheck A radio button](http://stackoverflow.com/questions/2117538/jquery-how-to-uncheck-a-radio-button) — dsgriffin, May 11 '13 at 10:45

score 2 · Answer 1 · answered Jul 11 '12 at 10:00

I know this question was asked in february, but I found this information interesting and I'd like to share with you:

Radio buttons

Radio buttons are like checkboxes except that when several share the same control name, they are mutually exclusive: when one is switched "on", all others with the same name are switched "off". The INPUT element is used to create a radio button control.

If no radio button in a set sharing the same control name is initially "on", user agent behavior for choosing which control is initially "on" is undefined. Note. Since existing implementations handle this case differently, the current specification differs from RFC 1866 ([RFC1866] section 8.1.2.4), which states: At all times, exactly one of the radio buttons in a set is checked. If none of the elements of a set of radio buttons specifies `CHECKED', then the user agent must check the first radio button of the set initially.

Since user agent behavior differs, authors should ensure that in each set of radio buttons that one is initially "on".

Source of the information

score 2 · Accepted Answer · answered Feb 28 '12 at 11:45

I have come up with this code:

var prev = {};
$("input[name=things]").click(function(){
    if (prev && prev.value == this.value) {
        $(this).prop('checked', !prev.status);
    }
    prev = {
        value: this.value,
        status: this.checked
    };
});

Unfortunately I had to use additional variable to store checked property because when click event is fired checked property is always true.

http://jsfiddle.net/syH46/11/

score 1 · Answer 3 · answered Oct 16 '13 at 21:40

Here's a nice hack:

<input type="radio" name="Name1" value="Value1" onmousedown="this.c=this.checked" onclick="if (this.c) { this.checked
= false }" />

This code should work as HTML, but you can also attach the events in javascript or jquery with additional logic if necessary.

score 0 · Answer 4 · answered Dec 20 '18 at 12:57

//I came up with something similar to the very first answer, over night.
//I use dirtyForms for JQuery inorder to monitor when I should forget to
//fill in some forms. https://github.com/snikch/jquery.dirtyforms

var prevFuncScope = {};

$("input[type=radio]").on('click', function(e) {     
//$("input[type=radio]").click(function(){  
  let prevBlockScope = {
    value: this.value,
    status: this.checked
  };

  var $form = $('form#patient_entrance_form');
  var $submitResetButtons = $form.find('[type="reset"],[type="submit"]');

  //if ($(e).dirtyForms('isDirty')) $(e).dirtyForms('setClean'); //setClean();

  //console.log('form is = ' + $('form#patient_entrance_form').dirtyForms('isDirty'));
  //console.log('input[yes] = ' + $('#prev_chiro_care_yes').dirtyForms('isDirty'));
  //console.log('input[no] = ' + $('#prev_chiro_care_no').dirtyForms('isDirty'));

  //console.log($(this));

  if (prevBlockScope.status == prevFuncScope.status) {
    $("input[type=radio]").dirtyForms('setClean');
    //$('#prev_chiro_care_yes').dirtyForms('setClean'); $(e).dirtyForms('setClean');
    //$('#prev_chiro_care_no').dirtyForms('setClean');
    //console.log('form is = ');
    $(this).prop('checked', !prevBlockScope.status);    
    if ($('form#patient_entrance_form').dirtyForms('isDirty')) {     
      //console.log('dirty1');
      $submitResetButtons.removeAttr('disabled');   
    } else if(!$(e).dirtyForms('isDirty')) {
      //console.log('clean1');  
      $submitResetButtons.attr('disabled', 'disabled');   
    }
  } else if (prevFuncScope && prevFuncScope.value == this.value) {
    $("input[type=radio]").dirtyForms('setClean');
    //$('#prev_chiro_care_yes').dirtyForms('setClean'); // $(e).dirtyForms('setClean');
    //$('#prev_chiro_care_no').dirtyForms('setClean');
    //console.log('form is = ');
    $(this).prop('checked', prevBlockScope.status);
    if ($('form#patient_entrance_form').dirtyForms('isDirty')) {
      //console.log('dirty2');
      $submitResetButtons.removeAttr('disabled'); //
    } else if(!$(e).dirtyForms('isDirty')) {
      //console.log('clean2');
      $submitResetButtons.removeAttr('disabled');
    }
  }
  prevFuncScope = {
    value: this.value,
    status: this.checked
    //isChecked: $('form#patient_entrance_form').dirtyForms('isDirty')
  };
});

score 0 · Answer 5 · answered Feb 28 '12 at 11:20

Radio buttons are designed so that one member of the group is always checked. If there are three options, then you should have three radio buttons:

<input  type="radio" name="things" value="exam" id="things_exam">
<label for="things_exam">exam</label>

<input  type="radio" name="things" value="journey" id="things_journey">
<label for="things_journey">journey</label>

<input  type="radio" name="things" value="" id="things_neither" checked><!-- note checked attribute, this is the default, one member of the group should always be checked -->
<label for="things_neither">neither</label>

There are ways to hack around that, but not reliably, and not without violating user expectations of how the UI works.

@GryzOshea — See the last paragraph of my answer. You can't do it reliably and even if you could, it doesn't make sense to try. — Quentin, Feb 28 '12 at 11:45

score 0 · Answer 6 · answered Feb 28 '12 at 11:31

0

http://jsfiddle.net/syH46/4/

Use live function.. The handler remains attached to the event throughout.

answered Feb 28 '12 at 11:31

Umesh251

108
1
3
10

if i click again on selected radio then this still is checked. should be unchecked – Gryz Oshea Feb 28 '12 at 11:43
Well it wount work that way.. The checked value will be updated only when the form element is updated to the server. – Umesh251 Feb 28 '12 at 11:47

score -2 · Answer 7 · edited May 23 '17 at 11:59

-2

This should sort you out:

How to uncheck a radio button?

either (plain js)

this.checked = false;

or (jQuery)

$(this).prop('checked', false);
// Note that the pre-jQuery 1.6 idiom was
// $(this).attr('checked', false);

Hope that helps :)

edited May 23 '17 at 11:59

Community

1
1

answered Feb 28 '12 at 11:18

will

4,557
6
32
33

1

Flag the question for duplicate if you found one, but don't copy-paste content from another answer. – Didier Ghys Feb 28 '12 at 11:19
It doesn't work for the reason explained in this answer: http://stackoverflow.com/a/6246260/55209 – Artem Koshelev Feb 28 '12 at 11:20
i will check on checked radio and unchecked this – Gryz Oshea Feb 28 '12 at 11:44
Sorry, didn't know how to do that. Do now, my bad. – will Feb 28 '12 at 12:02

Uncheck radiobutton

7 Answers7

Linked