使用单选按钮名称两次

Question

我有一个包含 3 个不同 "pages" 的多步骤表单。 1 和 2 用于常规用户输入，第 3 页是 1 和 2 的摘要。第 1 页有一些单选按钮。我想在第 3 页再次显示这些（它们应该是可编辑的）。我不想使用不同的名称，因为它们显示完全相同......我怎样才能做到这一点？为了更好地理解，这里是代码。

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>

Answer 1

每次使用不同的id=''。

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

Answer 2

您不能使用相同的两次 id。另外，为了避免样式问题，您不应使用数字作为属性值的首字母（来自旧规范），请参阅：What are valid values for the id attribute in HTML?.

这里是一个允许多个 label 使用单个 input 的示例。标签需要位于输入的同级元素内才能为其设置样式。

可能的工作示例 div 输入的兄弟姐妹：

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>

使用单选按钮名称两次

Use radio button name twice

html

css

forms

label

radio-button