CODEWITHSUNDEEP
javascriptjqueryjquery-mobileradio-buttonchecked
frequent
frequent

Reputation: 28513

How to programmatically refresh a group of radio buttons in jQuery Mobile?

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 becoming 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.

Upvotes: 1

Views: 7547

Answers (2)

ezanker
ezanker

Reputation: 24738

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

Upvotes: 1

TheMohanAhuja
TheMohanAhuja

Reputation: 1875

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

Upvotes: 4

Related Questions