Home » Html » Jquery, How to unselect all radio button in radio group

Jquery, How to unselect all radio button in radio group

Posted by: admin November 29, 2017 Leave a comment

Questions:

Anyone know how to unselect all radio buttons in a radio group ?

HTML:

<div id="emptimfields">
              <label id="lbl_emptim">How regulary do you employ people to help cultivate your land? </label><br/><br/>

             <fieldset data-role="controlgroup" data-type="vertical" id="emptim">

              <input name="emptim" id="radio1" value="fromtimetotime" type="radio" openmrs-valuecoded="" />
              <label for="radio1"> From time to time </label>

              <input name="emptim" id="radio2" value="allthetime" type="radio" openmrs-valuecoded="" />
              <label for="radio2">All the time</label>

              <input name="emptim" id="radio3" value="dontknow" type="radio" openmrs-valuecoded="" />
              <label for="radio3"> Don't know </label> 
            </fieldset>
        </div>

JQuery side:

$('input:radio[name=emptim]:checked').prop('checked', false); // doesn't work 

I’m certainly missing something basic, but I can’t figure out what is the problem.

First, I check Yes and then check a value of the second radio group :

enter image description here

Then, I check No to hide the second radio group:

enter image description here

Then, If I click on next, I get the value of what I’ve checked (but I checked no previously, so here I don’t want an alert, I want the radioButton “From time to time” to be unchecked) :

enter image description here

Finally, if I come back, nothing happend :

enter image description here

Answers:

You can give them a classname and try:

$('.classname').prop('checked', false);

When you use an older version of jQuery than 1.6 it has to be:

 $('<selector>').attr('checked', false);

EDIT :

Call the method .checkboxradio("refresh"); has also worked for me.

Questions:
Answers:
$('input:radio[name=indicatorType]').each(function () { $(this).prop('checked', false); });

Alternative solution for making ‘unchecked’ whole radio buttons of a radio group(‘indicatorType’ for above code sample).

Questions:
Answers:

This should do it. Notice the refresh option at the end to force the controlgroup to be updated.

An additional benefit of this method is that it targets a specific radio group by name, rather than all radio controls on a page.

$('input:radio[name=emptim]:checked').prop('checked', false).checkboxradio("refresh");