title: Checked Checkbox not updated in UI
body: <p>I have a problem regarding checking checkbox by JS.When I checked the checkbox by JS it seems like in program that it's checked but in UI it's not updated .</p>
  
  <p>if anyone have solution for this</p>
  
  <pre><code>&lt;!DOCTYPE html&gt; 
  &lt;html&gt; 
      &lt;head&gt; 
      &lt;title&gt;Check&lt;/title&gt; 
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt; 
      &lt;link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /&gt;
      &lt;script src="http://code.jquery.com/jquery-1.7.1.min.js"&gt;&lt;/script&gt;
      &lt;script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"&gt;&lt;/script&gt;
      &lt;script&gt;    
      function getCheckedValue()
      {
      return ((document.getElementById("rock").checked));
  
       }
  
      function setCheckedValue(toBeChecked){
          document.getElementById(toBeChecked).checked="checked";
          alert((document.getElementById(toBeChecked).checked))
          alert($('#'+toBeChecked).attr('checked'))
      }
      &lt;/script&gt;
  &lt;/head&gt; 
  &lt;body&gt; 
  &lt;div data-role="page"&gt;
      &lt;div data-role="header"&gt;
              &lt;h1&gt;What kind/s of music do you listen to?&lt;/h1&gt;
      &lt;/div&gt;&lt;!-- /header --&gt;
      &lt;div data-role="content"&gt;   
          &lt;input type="checkbox" class="music" name="music" id="rock" value="rock" &gt;
          &lt;label for="rock"&gt;Rock&lt;/label&gt;
          &lt;input type="button" value="Get" onclick="alert(getCheckedValue())"&gt;
          &lt;input type="button" value="Set" onclick="setCheckedValue('rock') "&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>