Having this radio buttons in horizontal controlgroup:

<div data-role="fieldcontain">
 <fieldset data-role="controlgroup" data-type="horizontal">
   <legend>Geslacht:</legend>
   <input id="gender-male" name="gender" type="radio" value="MALE" />
   <label for="gender-male">Man</label>
   <input id="gender-female" name="gender" type="radio" value="FEMALE" />
   <label for="gender-female">Vrouw</label>
 </fieldset>
</div>

At a given point I want to reset the values programmatically using:

$('#gender-male').prop('checked', false)
$('#gender-female').prop('checked', false)

However the styling of the radio buttons is not changed.

E.g. is MALE was selected it still appears selected.

Should I do some kind of refresh?

Having this radio buttons in horizontal controlgroup:

<div data-role="fieldcontain">
 <fieldset data-role="controlgroup" data-type="horizontal">
   <legend>Geslacht:</legend>
   <input id="gender-male" name="gender" type="radio" value="MALE" />
   <label for="gender-male">Man</label>
   <input id="gender-female" name="gender" type="radio" value="FEMALE" />
   <label for="gender-female">Vrouw</label>
 </fieldset>
</div>

At a given point I want to reset the values programmatically using:

$('#gender-male').prop('checked', false)
$('#gender-female').prop('checked', false)

However the styling of the radio buttons is not changed.

E.g. is MALE was selected it still appears selected.

Should I do some kind of refresh?

• javascript
• jquery
• jquery-mobile

2 Answers 2

Look at this:

$('#gender-male').attr("checked",false).checkboxradio("refresh");

For the JqueryMobile 1.4 the working solution (tested) is this:

(html taken from JQM 1.4 demo code)

<form><fieldset data-role="controlgroup">
    <input type="radio" name="radio-choice-v-2" id="radio-choice-v-2a" value="on" checked="checked">
    <label for="radio-choice-v-2a" style="font-weight: 100;">radio button A</label>
    <input type="radio" name="radio-choice-v-2" id="radio-choice-v-2b" value="off">
    <label for="radio-choice-v-2b" style="font-weight: 100;">radio button B</label>
    </fieldset></form>

As above the radio button A is checked. You want to set radio button B checked and A set to unchecked. Please note: checkboxradio( "refresh" ) goes for each radio button.

Javascript/Jquery (taken from JQM 1.4 API documentation and readapted)

    if (radioSetting == 0) {

        $( "#radio-choice-v-2b" ).prop( "checked", false ).checkboxradio( "refresh" );
        $( "#radio-choice-v-2a" ).prop( "checked", true ).checkboxradio( "refresh" );
    } 
    else {
        $( "#radio-choice-v-2a" ).prop( "checked", false ).checkboxradio( "refresh" );
        $( "#radio-choice-v-2b" ).prop( "checked", true ).checkboxradio( "refresh" );
    }