radio different names - only check one

Question

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:

<input type="radio" name="id[1]" value="40">
<input type="radio" name="id[1]" value="30">
<input type="radio" name="id[1]" value="20">
<input type="radio" name="id[1]" value="10">
<input type="radio" name="id[2]" value="40">
<input type="radio" name="id[2]" value="30">
<input type="radio" name="id[2]" value="20">
<input type="radio" name="id[2]" value="10">
<input type="radio" name="id[3]" value="10">
....

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.

I found this script here on stackoverflow to only select one radio-button:

$(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();
  });
});

Here is a fiddle of that:

http://jsfiddle.net/3xD7V/1/

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:

http://jsfiddle.net/ksZxV/

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 (EDIT: and Opera as well as IE9), 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.

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...

Any idea for this problem?

Answer 1

You don't need to uncheck all radio buttons, then re-check the current one. Un-checking the previously checked button suffices.

As a side effect of this simplification, your bug is also fixed.

$(document).ready(function () {
    $('input[type=radio]').change(function() {
        // When any radio button on the page is selected,
        // then deselect all other radio buttons.
        $('input[type=radio]:checked').not(this).prop('checked', false);
    });
});​

Answer 2

Just remove event.preventDefault(); and it will work.

Check this JSFIDDLE

Answer 3

Radio button with a different name but a single selection

Working Example : https://codepen.io/Vivekparashar/pen/wvwLwxY

JS :

$(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();
  });
});

HTML :

<div class="mycontainer">   
    <h3 class="heading">Radio Button With Different Name/Group but Single Selection</h3>
    <hr>
    <form>
        <div class="radioDiv">
            <label class="11">Radio Button 1</label>
            <input type="radio" name="radiobutton1">
        </div>
        <div class="radioDiv">
            <label>Radio Button 2</label>
            <input type="radio" name="radiobutton2">
        </div>
        <div class="radioDiv">
            <label>Radio Button 3</label>
            <input type="radio" name="radiobutton3">
        </div>
        <div class="radioDiv">
            <label>Radio Button 4</label>
            <input type="radio" name="radiobutton4">
        </div>
        <div class="radioDiv">
            <label>Radio Button 5</label>
            <input type="radio" name="radiobutton5">
        </div>
    </form>
</div>  

Answer 4

why do you have event.preventDefault(); there....since your code inside click function is doing that.

remove the event.preventDefault(); and try

here is the fiddle..

http://jsfiddle.net/ksZxV/1/