17

I have been passed down a complex application which dynamically creates HTML.

The problem is, the previous person did not know that the "name" attribute of radio buttons actually is the group association.

With the following mark up, is there any way to put these in two groups

<div>
  <%-- would like this to be a seperate group without changing name--%>
  <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>
</div>

<div>
  <%-- would like this to be a seperate group without changing name--%>
  <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>
</div>

Is there any div or anything I can wrap around them to separate the grouping? I have tried field set and legend but it has no effect. I know I could put each one in a form but then they will not all be submitted.

3
  • 2
    You'll need to give different names to each grouping of radio buttons. Jun 11, 2015 at 21:37
  • @Rick Hitchcock That is my only option?
    – clamchoda
    Jun 11, 2015 at 21:40
  • 2
    Yes, assuming you want to be able to check an item from each grouping. Jun 11, 2015 at 21:41

4 Answers 4

21

Put them in different form tag

<form>
  <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>
</form>

<form>
  <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>
</form>
4
  • I’m unsure as to why you couldn’t use the array association, like name=“radio[]” ? Oct 7, 2018 at 12:26
  • I don't get what you mean.
    – RJ.Hwang
    Oct 7, 2018 at 15:52
  • if wrap your radios with label for="..." this may not work.
    – electron
    May 30, 2020 at 17:33
  • label for="..." need to set diff id.
    – RJ.Hwang
    Jun 1, 2020 at 3:34
1

from my knowledge, you cant. the name of the radio button defines the group it is in, then in the handler for the submitted form, you call the name to get the selected option. using line separators or divs will not disassociate them with each other. you can only have one radio button for a group selected. if you only want them visually separated, Austin has the right idea.

Changing the name of each individual group is your only option to allow 2 selected buttons.

0

Was looking for something like that too, a bit later :D

<input type="radio" name="radio[group1]" value="0" checked>
<input type="radio" name="radio[group1]" value="1">
<input type="radio" name="radio[group1]" value="2">

<input type="radio" name="radio[group2]" value="0">
<input type="radio" name="radio[group2]" value="1" checked>
<input type="radio" name="radio[group2]" value="2">

In your form result, you'll have :

"radio" => [
    "group1" => "0",
    "group2" => "1"
]
1
  • This is only valid for PHP. Whether the result will be structured as you present depends on your back-end. By default, the client-side JavaScript will not structure the FormData this way.
    – undefined
    Nov 25, 2022 at 9:05
-7

I think you want to use <fieldset>, this will allow you to separate them within the same form.

Example: https://jsfiddle.net/ndn7jmh5/2/

If you can't do that try using <br/> to separate them onto different lines.

2
  • 1
    Both groups still behave as one big group.
    – clamchoda
    Jun 11, 2015 at 21:41
  • 1
    @clamchoda If you want to be able to tick an option from each group you need to change the name. Otherwise you would be submitting two values within the same post. It just wouldn't work. Jun 11, 2015 at 21:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.