Say I have a group of 3 radio buttons like this:

<label for="a-1">A</label>
<input type="radio" name="a" id="a-1" value="1" />
<label for="a-2">A</label>
<input type="radio" name="a" id="a-2" value="2" />
<label for="a-3">A</label>
<input type="radio" name="a" id="a-3" value="3" />

With the first radio being set to checked="true" ala

$("input").eq(0).attr("checked", true);

The JQM API for checkboxradio says the following:

$( ".selector" ).prop( "checked", true ).checkboxradio( "refresh" );

sets a radio button programmatically.

Question:
What if I need to switch the radio from one button to another? So....

$("input").eq(1).trigger("click");

Is it always necessary to update my radio buttons individually on my click handler or shouldn't this work out of the box? After all, when I have a non JQM radio button group and trigger a click on a radio element, the button previously checked is unchecked automatically.

Thanks!

EDIT:
Plain example:

 var foo = '<input type="radio" checked="checked" name="a" id="a-1" value="1" />'  + 
           '<input type="radio" name="a" id="a-2" value="2" />' +
           '<input type="radio" name="a" id="a-3" value="3" />';
 $("div.ui-content").append( $(foo) );
 $(document.getElementById("a-2")).trigger("click");

This generates three radio buttons, first one being selected. On click, the 2nd radio is being selected and the first one unselected.

EDIT:
JQM Example:

$("div.ui-content").empty()
var bar = '<div data-role="controlgroup">' +
      '<input type="radio" name="a" id="a-1" value="choice-1" checked="checked">' + 
      '<label for="a-1">1</label>' +
      '<input type="radio" name="a" id="a-2" value="choice-2">' +
      '<label for="a-2">2</label>' +
      '<input type="radio" name="a" id="a-3" value="choice-3">' +
      '<label for="a-3">3</label>' +
      '</div>';
$("div.ui-content").append( $(bar) ).enhanceWithin();
$("input").eq(2).trigger("click").checkboxradio("refresh");

This will result in 2 select radio buttons.

Say I have a group of 3 radio buttons like this:

<label for="a-1">A</label>
<input type="radio" name="a" id="a-1" value="1" />
<label for="a-2">A</label>
<input type="radio" name="a" id="a-2" value="2" />
<label for="a-3">A</label>
<input type="radio" name="a" id="a-3" value="3" />

With the first radio being set to checked="true" ala

$("input").eq(0).attr("checked", true);

The JQM API for checkboxradio says the following:

$( ".selector" ).prop( "checked", true ).checkboxradio( "refresh" );

sets a radio button programmatically.

Question:
What if I need to switch the radio from one button to another? So....

$("input").eq(1).trigger("click");

Is it always necessary to update my radio buttons individually on my click handler or shouldn't this work out of the box? After all, when I have a non JQM radio button group and trigger a click on a radio element, the button previously checked is unchecked automatically.

Thanks!

EDIT:
Plain example:

 var foo = '<input type="radio" checked="checked" name="a" id="a-1" value="1" />'  + 
           '<input type="radio" name="a" id="a-2" value="2" />' +
           '<input type="radio" name="a" id="a-3" value="3" />';
 $("div.ui-content").append( $(foo) );
 $(document.getElementById("a-2")).trigger("click");

This generates three radio buttons, first one being selected. On click, the 2nd radio is being selected and the first one unselected.

EDIT:
JQM Example:

$("div.ui-content").empty()
var bar = '<div data-role="controlgroup">' +
      '<input type="radio" name="a" id="a-1" value="choice-1" checked="checked">' + 
      '<label for="a-1">1</label>' +
      '<input type="radio" name="a" id="a-2" value="choice-2">' +
      '<label for="a-2">2</label>' +
      '<input type="radio" name="a" id="a-3" value="choice-3">' +
      '<label for="a-3">3</label>' +
      '</div>';
$("div.ui-content").append( $(bar) ).enhanceWithin();
$("input").eq(2).trigger("click").checkboxradio("refresh");

This will result in 2 select radio buttons.

• javascript
• jquery
• jquery-mobile
• radio-button
• checked

• what exactly you want to do? selecting a radio button dynamically without refreshing radio group, right? – TheMohanAhuja Commented Feb 26, 2014 at 11:22
• Not selecting, but triggering a click. In plain HTML, trigger("click") on C unchecks radio A, in JQM it does not. See jsbin./ofuhaw/1202 – frequent Commented Feb 26, 2014 at 11:25

2 Answers 2

I have followed your link just replace this

$(document).on("click", "#btn2", function () {
    //$("#b-3").trigger("click").checkboxradio("refresh");
    $("[for=b-3]").trigger("click");
});

it did trick for me

TheMohanAhuja has given the correct answer. After jQM enhances the checkbox, it is responding to clicks on the label element not the input.

So for the code you gave in the OP, just change the last line to trigger a click on the label:

$("div.ui-content").empty();
var bar = '<div data-role="controlgroup">' +
  '<input type="radio" name="a" id="a-1" value="choice-1" checked="checked">' + 
  '<label for="a-1">1</label>' +
  '<input type="radio" name="a" id="a-2" value="choice-2">' +
  '<label for="a-2">2</label>' +
  '<input type="radio" name="a" id="a-3" value="choice-3">' +
  '<label for="a-3">3</label>' +
  '</div>';
$("div.ui-content").append( $(bar) ).enhanceWithin();

$(".ui-radio label").eq(2).trigger("click");

Here is a DEMO