Note that there are some explanatory texts on larger screens.

plurals
  1. POradio different names - only check one
    primarykey
    data
    text
    <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="nofollow">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="nofollow">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>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload