title: Jquery-UI radio button
body: <p>I am using two groups of radio buttons</p>
  
  <p>Group 1: </p>
  
  <ul>
  <li>State</li>
  <li>City</li>
  </ul>
  
  <p>Group 2: </p>
  
  <ul>
  <li>A-C</li>
  <li>D-H</li>
  <li>I-M</li>
  <li>N-R</li>
  <li>S-Z</li>
  </ul>
  
  <p>When I toggle between state and city, I want A-C from group 2 to be set to checked while the others are set to unchecked.</p>
  
  <p>I have it working in this fiddle here <a href="http://jsfiddle.net/Fzq8L/" rel="nofollow">fiddle</a></p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div id="sort-radio"&gt;
      &lt;input type="radio" id="byState" name="sort-radio" checked="checked"/&gt;&lt;label for="byState"&gt;By State&lt;/label&gt;
      &lt;input type="radio" id="byCity" name="sort-radio"/&gt;&lt;label for="byCity"&gt;By City&lt;/label&gt;
  &lt;/div&gt;
  
  &lt;div id="alphabet-radio" style="width:300px;"&gt;
  &lt;input type="radio" id="A-C" name="alphabet-radio" checked="checked"/&gt;
      &lt;label for="A-C"&gt;A-C&lt;/label&gt;
  &lt;input type="radio" id="D-H" name="alphabet-radio"/&gt;
      &lt;label for="D-H"&gt;D-H&lt;/label&gt;
  &lt;input type="radio" id="I-M" name="alphabet-radio"/&gt;
      &lt;label for="I-M"&gt;I-M&lt;/label&gt;
  &lt;input type="radio" id="N-R" name="alphabet-radio"/&gt;
      &lt;label for="N-R"&gt;N-R&lt;/label&gt;
  &lt;input type="radio" id="S-Z" name="alphabet-radio"/&gt;
      &lt;label for="S-Z"&gt;S-Z&lt;/label&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>JavaScript:</strong></p>
  
  <pre><code>$(function () {
      $("#sort-radio").buttonset();
  });
  
  $(function () {
      $("#alphabet-radio").buttonset().find('label').css('width', '19.4%');
  });
  
  document.getElementById("byState").addEventListener("click", function () {
      document.getElementById("A-C").checked = true;
      document.getElementById("D-H").checked = false;
      document.getElementById("I-M").checked = false;
      document.getElementById("N-R").checked = false;
      document.getElementById("S-Z").checked = false;
  }, false);
  
  document.getElementById("byCity").addEventListener("click", function () {
      document.getElementById("A-C").checked = true;
      document.getElementById("D-H").checked = false;
      document.getElementById("I-M").checked = false;
      document.getElementById("N-R").checked = false;
      document.getElementById("S-Z").checked = false;
  }, false);
  </code></pre>
  
  <p>However, when I use this exact code in my website, it does not work (it leaves the previously selected button from group 2 selected).  I am using jquery-ui-1.10.1.custom.css which displays the radio buttons nicely, as found here: <a href="http://jqueryui.com/button/#radio" rel="nofollow">jquery ui button</a>.</p>
  
  <p>Any clue why this would affect it?  When I remove the line <code>&lt;link rel="stylesheet" href="jquery-ui-1.10.1.custom.css" /&gt;</code> from my index.php, it works beautifully.</p>