一个标签用于多个输入（无线电）

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>

是否可以为多个输入（收音机）设置一个标签？因此，如果我按下标签 (e.q.for="1")，两个输入字段会被选中（在 div class 一和二中输入 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

The LABEL element may be used to attach information to controls. Each LABEL element is associated with exactly one form control.

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

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

JS:

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

一个标签用于多个输入（无线电）

One label for multiuple inputs (radio)

html

css

label

input

radio-button