Одна метка для многократных входов (радио) - PullRequest
Новая
       69

Одна метка для многократных входов (радио)

1 голос
/ 24 января 2020 

$('label').click(function() {
  id = this.id.split('-');

  if (id[0] === '1') {
    id[0] = '2';
  } else {
    id[0] = '1';
  }

  $('#' + id[0] + '-' + id[1]).prop('checked', true);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="one">
  <input type="radio" id="1-1" name="1-level">
  <label for="1-1" id="1-1">1</label>
  <input type="radio" id="1-2" name="1-level">
  <label for="1-2" id="1-2">2</label>
</div>
<div class="two">
  <input type="radio" id="2-1" name="2-level">
  <label for="2-1" id="2-1">1</label>
  <input type="radio" id="2-2" name="2-level">
  <label for="2-2" id="2-2">2</label>
</div>

Можно ли иметь одну метку для нескольких входов (радио)? Поэтому, если я нажимаю метку (например, = 1), проверяются два поля ввода (ввод с идентификатором 1 в первом и втором классе div)? Вот мой пример: 

<div class="one">
    <input type="radio" id="1" name="level">
    <label for="1">1</label>
    <input type="radio" id="2" name="level">
    <label for="2">2</label>
</div>
<div class="two">
    <input type="radio" id="1" name="level">
    <label for="1">1</label>
    <input type="radio" id="2" name="level">
    <label for="2">2</label>
</div>

1 Ответ

0 голосов
/ 24 января 2020

Цитата из документации: https://www.w3.org/TR/html401/interact/forms.html#h -17.9.1

Элемент LABEL может использоваться для прикрепления информации к элементам управления. Каждый элемент LABEL связан только с одним элементом управления формой.

Таким образом, единственный способ сделать то, что вы просили, это использовать JS

HTML:
Использовать data-input-group-id вместо id и data-for-input-group вместо for. Также теперь вы сможете использовать «1» и «2», а не «1-1» и т. Д. c.

JS: 

$('[data-for-input-group]').click(function() {
   let inputGroupId = this.dataset.inputGroupId;
   $('[data-input-group-id = "'+inputGroupId+'"]').prop('checked', true);
});
...