Use radio button name twice

Question

I have a multi step form with 3 different "pages". 1 and 2 are for regular user input and page 3 is a summary from 1 and 2. Page 1 has some radio buttons. I'd like to show these in page 3 again (they should be editable). I don't want to use to different names, because they show exact the same... how can I achieve this? Here is the code for better understanding.

input {
  display: none;
}

label {
  width: 25px;
  height: 25px;
  display: inline-block;
  color: #fff;
  background-color: #000;
  text-align: center;
  line-height: 25px;
}

input:checked + label {
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="page-1">
  <input type="radio" id="1" name="a" value="1" checked>
  <label for="1">1</label>
  <input type="radio" id="2" name="a" value="2">
  <label for="2">2</label>
</div>
<div class="page-2">
  <!-- ... -->
</div>
<div class="page-3">
  <input type="radio" id="1" name="a" value="1">
  <label for="1">1</label>
  <input type="radio" id="2" name="a" value="2">
  <label for="2">2</label>
</div>

it's okay to use the same value for the name attribute, but not the id , — G-Cyrillus, Feb 08 '20 at 12:29

G-Cyrillus · Accepted Answer · 2020-02-08T13:06:57.400

you cannot use twice the same id. Also to avoid styling issues , you should not use a number as a first letter for an attribute value (from old specification ) see : What are valid values for the id attribute in HTML?.

here is an example allowing a single input to be used by more than 1 label . Labels will need to be inside a sibbling of the input in order to style them.

possible working example with div sibblings of inputs:

input {
  display: none;
}

label {
  width: 25px;
  height: 25px;
  display: inline-block;
  color: #fff;
  background-color: #000;
  text-align: center;
  line-height: 25px;
}

input#a1:checked ~ div label[for="a1"],
input#a2:checked ~ div label[for="a2"]{
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <input type="radio" id="a1" name="a" value="1" checked>
  <input type="radio" id="a2" name="a" value="2">
<div class="page-1">
  <label for="a1">1</label>
  <label for="a2">2</label>
</div>

<div class="page-2">
  <!-- ... -->
</div>

<div class="page-3">
  <label for="a1">1</label>
  <label for="a2">2</label>
</div>

One question: Do you know why [this](https://jsfiddle.net/u5vdtg8k/) doesn't work? — xif80599, Feb 08 '20 at 12:52
@xif80599 as stated in my answer : ***Also to avoid styling issues , you should not use a number as a first letter for an attribute value (old specification ).*** add a letter in front of id like i did in the snippet ;) see https://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html — G-Cyrillus, Feb 08 '20 at 13:04

score 0 · Answer 2 · answered Feb 08 '20 at 12:35

0

use different id='' everytime.

  <div class="page-3">
      <input type="radio" id="3" name="a" value="1">
      <label for="1">1</label>
      <input type="radio" id="4" name="a" value="2">
      <label for="2">2</label>
    </div>

answered Feb 08 '20 at 12:35

Md Abdul Awal

512
2
9

Use radio button name twice

2 Answers2