jquery - jQuery Mobile: refresh radio button selection periodically

Question

I'm having trouble with refreshing a group of radio buttons, I hope someone could help.. The problem is how to display the newest selection(which radio is selected), so when one user select A, how could another user see radio button '#rA' is selected on his own device.

here is the markup: the div that displays the selected radio's value, and the 3 radio buttons.

<div id="radiostate"><?php echo $value;?></div>
<div id="test" >     
    <input type="radio" name="r" id="rB" value="B" data-theme="c" ><label for="rB">&nbsp;</label>  
    <input type="radio" name="r" id="rA" value="A" data-theme="a" ><label for="rA">&nbsp;</label>
    <input type="radio" name="r" id="rC" value="C" data-theme="f" ><label for="rC">&nbsp;</label>
</div> 

the code to refresh div "#radiostate" every 10 seconds, and get radio button checked based on $value:

 var refresh = setInterval(function(){
   $('#radiostate').load('getstate.php');
   var dbvalue = $('#radiostate').text();
   $('input[type="radio"][value="' + dbvalue +'"]').attr('checked', true).checkboxradio("refresh");
 }, 10000); 

this works fine to display the selected radio value (A, B, or C) in "#radiostate", but the radio buttons won't change... Any suggestions? thanks in advance!

EDIT1

I've also tried to put the radio buttons in another PHP(radio.php), and then load it every 10 seconds, but this totally messed up the style. If i don't include jquery.js and jquerymobile.js in radio.php, the radio buttons lose style:

if I include jquery.js and jquerymobie.js, the index.php would looks like this, and the layer increases after each loading of radio.php:

Answer 1

而不是使用 .attr 来检查单选按钮使用 .prop

var refresh = setInterval(function(){
$('#radiostate').load('getstate.php');
var dbvalue = $('#radiostate').text();
$('input[type="radio"][value="' + dbvalue +'"]').prop('checked', true).checkboxradio("refresh");
}, 10000);