一个用于多输入的标签(收音机)

Question

​

$('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>

​

是否可以为多个输入(无线电)设置一个标签？因此，如果我按下标签(即q. for="1")，就会检查两个输入字段(在div类1和2中输入id 1)？以下是我的例子：

​

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

​

Answer 1

引自导管：https://www.w3.org/TR/html401/interact/forms.html#h-17.9.1

标签元素可用于将信息附加到控件。每个LABEL元素都与一个窗体控件相关联。

所以你要做的唯一方法就是使用JS

HTML：

使用data-input-group-id代替id，使用data-for-input-group代替for。此外，您现在可以使用"1“和"2”，而不是"1-1“等。

联署材料：

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