Используйте имя переключателя дважды - PullRequest
Новая
       6

Используйте имя переключателя дважды

1 голос
/ 08 февраля 2020

У меня есть многошаговая форма с 3 разными "страницами". 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>

Ответы [ 2 ]

2 голосов
/ 08 февраля 2020

нельзя использовать дважды одинаково id. Также, чтобы избежать проблем с оформлением, не следует использовать число в качестве первой буквы для значения атрибута (из старой спецификации), см. Каковы допустимые значения для атрибута id в HTML? .

Вот пример, позволяющий использовать один input более чем 1 label. Метки должны быть внутри одного элемента ввода, чтобы их стилизовать.

возможный рабочий пример с элементами одного элемента 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>
0 голосов
/ 08 февраля 2020

используйте разные 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>
...