title: radio different names - only check one
body: <p>I'm using many radio-buttons in a xtcommerce-based-workaround. Those radiobuttons are dynamically created and given a different name for each group like this:</p>
  
  <pre><code>&lt;input type="radio" name="id[1]" value="40"&gt;
  &lt;input type="radio" name="id[1]" value="30"&gt;
  &lt;input type="radio" name="id[1]" value="20"&gt;
  &lt;input type="radio" name="id[1]" value="10"&gt;
  &lt;input type="radio" name="id[2]" value="40"&gt;
  &lt;input type="radio" name="id[2]" value="30"&gt;
  &lt;input type="radio" name="id[2]" value="20"&gt;
  &lt;input type="radio" name="id[2]" value="10"&gt;
  &lt;input type="radio" name="id[3]" value="10"&gt;
  ....
  </code></pre>
  
  <p>Now I want to "group" those radio-buttons back together, so that I can only choose one radio-button at a time. Now by default every first radio-button of each "group" (name="id[1]", name="id[2]", etc.) is preselected and every value of each radio-button gets submitted.</p>
  
  <p>I found this script here on stackoverflow to only select one radio-button:</p>
  
  <pre><code>$(document).ready(function () {
    $('input[type=radio]').prop('checked', false);
    $('input[type=radio]:first').prop('checked', true)
  
    $('input[type=radio]').click(function (event) {
      $('input[type=radio]').prop('checked', false);
      $(this).prop('checked', true);
  
      event.preventDefault();
    });
  });
  </code></pre>
  
  <p>Here is a fiddle of that:</p>
  
  <p><a href="http://jsfiddle.net/3xD7V/1/" rel="noreferrer">http://jsfiddle.net/3xD7V/1/</a></p>
  
  <p>This works so far, I can only select one radio-button on my page. But there is one problem as you can see in my js-fiddle too: </p>
  
  <p><a href="http://jsfiddle.net/ksZxV/" rel="noreferrer">http://jsfiddle.net/ksZxV/</a></p>
  
  <p>The first radio-button of the first group is preselected - that's ok. But if you choose another radio-button of the same group, the selection-"mark" does not change. Only if you click a radio-button of another group the chosen radio-button gets selected (found another bug in FF <strong>(EDIT: and Opera as well as IE9)</strong>, the selection-mark is not shown if I choose any other radio-button; in Chrome it changes by selecting another group). If you stay in this same group, the selection doesn't change either. </p>
  
  <p>On my local based installation I have got a dynamically-changing updater, which states the new price of the selected item (sorry I couldn't implement this to the fiddle). This works so far, the price gets updated even if I choose another radio-button of the same group, but as described before the selection-"mark" does not change...</p>
  
  <p>Any idea for this problem?</p>