CODEWITHSUNDEEP
javascriptjqueryhtml
Ahmed ElGamil
Ahmed ElGamil

Reputation: 179

Multipe radio buttons groups

I have this form:

<div id="div1">
  <form>
  <input type="radio" name="r1" id="r1" value="r1 value 1" />
  <input type="radio" name="r1" id="r1" value="r1 value 2" />
  <input type="radio" name="r1" id="r1" value="r1 value 3" />

  <input type="radio" name="r2" id="r2" value="r2 value 1" />
  <input type="radio" name="r2" id="r2" value="r2 value 2" />
  <input type="radio" name="r2" id="r2" value="r2 value 3" />

  <input type="radio" name="r3" id="r3" value="r3 value 1" />
  <input type="radio" name="r3" id="r3" value="r3 value 2" />
  <input type="radio" name="r3" id="r3" value="r3 value 3" />
  </form>
</div>

The number of radio button groups is changeable.

How do I deselect any other radio button once the end user selects any radio button in a certain group, because currently if I select r1 value 1 and then select r3 value 3, both of them will be ticked. I want it once I select a radio button within a certain group to deselect radio buttons across all other groups beside the one that I have the selection on.

Thank you very much in advance.

Upvotes: 1

Views: 177

Answers (4)

Charles D&#39;Monte
Charles D&#39;Monte

Reputation: 372

Change your code so that the name attribute for all the radio buttons are the same. And you can't have same id for more than one element.

Upvotes: 1

Joshua Burns
Joshua Burns

Reputation: 8572

Through jQuery, what you're asking for is most definitely possible. Here is the exact solution:

$('#div1 form input:radio').change(function() {
  // Grabs all other radio buttons in the form, and
  // deselects all but the one which was clicked on.
  $('#div1 form input:radio').not(this).prop('checked', false);
});

In addition, IDs have to be 100% unique between any HTML element. While this doesn't prevent the above code from working, if you were to attempt select an item based on it's ID such as $('#r1') only one of those elements will be returned, not all of them.

For a full implementation:

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="http://code.jquery.com/jquery-2.0.2.min.js"></script>
    </head>
    <body>
        <script type="text/javascript">
            $(document).ready(function() {
                $('#div1 form input:radio').change(function() {
                    // Grabs all other radio buttons in the form, and
                    // deselects all but the one which was clicked on.
                    $('#div1 form input:radio').not(this).prop('checked', false);
                });
            });
        </script>

        <div id="div1">
            <form>
                <input type="radio" name="r1" id="r1" value="r1 value 1" />
                <input type="radio" name="r1" id="r1" value="r1 value 2" />
                <input type="radio" name="r1" id="r1" value="r1 value 3" />

                <input type="radio" name="r2" id="r2" value="r2 value 1" />
                <input type="radio" name="r2" id="r2" value="r2 value 2" />
                <input type="radio" name="r2" id="r2" value="r2 value 3" />

                <input type="radio" name="r3" id="r3" value="r3 value 1" />
                <input type="radio" name="r3" id="r3" value="r3 value 2" />
                <input type="radio" name="r3" id="r3" value="r3 value 3" />
            </form>
        </div>
    </body>
</html>

For IE 6, 7 and 8 compatibility:

Replace:
<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.2.min.js"></script>
With:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

Upvotes: 0

cocco
cocco

Reputation: 16706

This way you have your groups. But as soon you select another radio it deselects any other radio. id's,name's changed. 

<div id="div1">
  <form>
<div>Group 1
  <input type="radio" name="r" id="g1r1" value="r1 value 1" />
  <input type="radio" name="r" id="g1r2" value="r1 value 2" />
  <input type="radio" name="r" id="g1r3" value="r1 value 3" />
</div>
<div>Group 2
  <input type="radio" name="r" id="g2r1" value="r2 value 1" />
  <input type="radio" name="r" id="g2r2" value="r2 value 2" />
  <input type="radio" name="r" id="g2r3" value="r2 value 3" />
</div>
<div>Group 3
  <input type="radio" name="r" id="g3r1" value="r3 value 1" />
  <input type="radio" name="r" id="g3r2" value="r3 value 2" />
  <input type="radio" name="r" id="g3r3" value="r3 value 3" />
</div>
  </form>
</div>

Upvotes: 1

sma
sma

Reputation: 9597

Is there a reason all the radio buttons can't be in the same group? Putting them under the same group name is an easy fix. If not, using a simple jQuery click handler to deselect all other radio buttons will work.

Also, you have duplicate IDs in your example. Not sure if that's intended or a mistake, but you should fix that also.

Upvotes: 1

Related Questions