1

I have radio buttons placed in different div. How can I make only one of these selectable?

<div><input type="radio" /></div>
<div><input type="radio" /></div>
<div><input type="radio" /></div>
<div><input type="radio" /></div>
Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
Vignesh Subramanian
  • 7,161
  • 14
  • 87
  • 150

4 Answers4

10

add an attribute name="myRadio" for each radio.

Albzi
  • 15,431
  • 6
  • 46
  • 63
pumpkinzzz
  • 2,907
  • 2
  • 18
  • 32
8

radio inputs are grouped by the name attribute, which is required to maintain HTML validity. It also makes retrieving the selected value possible on the server side.

<div><input type="radio" name="foo" /></div>
<div><input type="radio" name="foo" /></div>
<div><input type="radio" name="foo" /></div>
<div><input type="radio" name="foo" /></div>
Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
2

Use the same name attribute with different value for those radio buttons.

Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
Madhu
  • 2,416
  • 3
  • 15
  • 33
  • @RoryMcCrossan how can we keep same value for radio buttons? we should have same name for `radio` buttons and each radio button should have different value so that it can be used at server side. For example two radio buttons with same name `sex` but diff values as `male` and `female` so that we can get value of that radio button using name `sex` at the server side.. – Madhu May 21 '14 at 11:50
  • You're correct. I misread your answer. – Rory McCrossan May 21 '14 at 11:53
2

Put them in different form tag

<div><form>
<fieldset>
    <legend>Group 1</legend>
    <label class="radio-inline">
        <input type="radio" name="radio" value="1">Group 1 Option 1</label>
    <label class="radio-inline">
        <input type="radio" name="radio" value="2">Group 1 Option 2</label>
    <label class="radio-inline">
        <input type="radio" name="radio" value="3">Group 1 Option 3</label>
</fieldset>
</form>
<form>
<fieldset>
    <legend>Group 2</legend>
    <label class="radio-inline">
        <input type="radio" name="radio" value="1">Group 2 Option 1</label>
    <label class="radio-inline">
        <input type="radio" name="radio" value="2">Group 2 Option 2</label>
    <label class="radio-inline">
        <input type="radio" name="radio" value="3">Group 2 Option 3</label>
</fieldset>
</form>

Pavithra
  • 21
  • 1