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?

Monotint

And why can you not give the same name to each button? – Schinica

hi LeviBotelho: that's not possible because of the xtcommerce-based-workaround, the name is given dynamically and needs to be there like this to get the selected options in the cart...hope you understand what I describe... – Monotint

Gotcha. Too late though it seems that Yograj/bipen have the solution :) – Schinica

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);
    });
});​

Cyanate

Hi Grilse, thx for your solution, too! I took yours, because the amount of code is the feawest. This code is for all radio-buttons, but how can I except two radio-buttons inside a div with id="option_3"? – Monotint

addition to my comment above: or all radio-buttons with name="id[3]" – Monotint

If I understand correctly, then you wish to apply the same logic, but not to the entire page, but to some specific part of the page. To do so, change the jquery selector. For examply, using $('div#option_3 input[type=radio]') and $('div#option_3 input[type=radio]:checked') would limit the effect to some div and leave the rest of the page working as normal. Applying this logic to only radio buttons with name="id[3]" would be rather pointless, since it would not change existing radio button behaviour. – Cyanate

thx Grilse...I got it with this code: ` $('input[type=radio]').not('[name="id[3]"]').not('[name="id[1]"]').change(function() { // When any radio button on the page is selected, // then deselect all other radio buttons. $('input[type=radio]:checked').not(this).not('[name="id[3]"]').not('[name="id[1]"]').prop('checked', false); });` – Monotint

Answer 2

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/

Baynebridge

I have used a script from here and took all of the code, but you solution works well, thanks a lot! – Monotint

Answer 3

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

Check this JSFIDDLE

Graveclothes

Answer 4

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>  

Horwitz