title: Set radio button value in javascript
body: <p>I am trying to set the value of the radio button via javascript. But I am not being able to do so. What I tried to do was have 4 radio buttons one of which is already selected. If I select some other radio button and click on Refresh, default radio button should be selected.</p>
  
  <p><a href="http://jsfiddle.net/ds345/Un8XK/1/" rel="nofollow">http://jsfiddle.net/ds345/Un8XK/1/</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;fieldset data-role="controlgroup" data-type="vertical"&gt;
      &lt;input type="radio" name="radio" id="x" data-theme="a" /&gt;
      &lt;label for="x" style="color: White"&gt;X&lt;/label&gt;
      &lt;input type="radio" name="radio" id="y" onclick="axisonoff(this)" data-theme="a" /&gt;
      &lt;label for="y" style="color: White"&gt;Y&lt;/label&gt;
      &lt;input type="radio" name="radio" id="z" data-theme="a" /&gt;
      &lt;label for="z" &gt;Z&lt;/label&gt;
      &lt;input type="radio" name="radio" id="none" data-theme="a" /&gt;
      &lt;label for="none" style="color: White"&gt;None&lt;/label&gt;
  &lt;/fieldset&gt;
  
  
  &lt;button id = "Refresh" value="Refresh"&gt;Refresh&lt;/button&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>$(document).ready(function () {
      $("#none").attr("checked", true).checkboxradio("refresh"); // if this line is not present initially then it works for the 1st refresh. 
  
  });
  
  $("#Refresh").click(function(){
          $("#x").attr("checked", false).checkboxradio("refresh");
          $("#y").attr("checked", false).checkboxradio("refresh");
          $("#z").attr("checked", false).checkboxradio("refresh");
      $("#none").attr("checked", true).checkboxradio("refresh");
  });
  </code></pre>
  
  <p>I am sure that I have missed something very small but not able to figure out why this approach is not working.</p>
  
  <p>Tools used: Javascript,Jquery 1.9 and JQuery mobile 1.3</p>
  
  <p>Thanks,</p>
  
  <p>Deeksha</p>