同name单选按钮组标签在第二个表单失效问题

我创建了两组name属性相同的radio按钮组，第一个表单form1中的label与radio按钮关联正常，但第二个表单form2中的label点击后会触发第一个表单form1内的radio按钮。期望实现每个表单内的label仅关联其所属表单的radio按钮。

原代码： #

<style>
.custom-radio label {
    color:#FFF;
    border-radius:20px;
  display: inline-block;
  width: 60px;
  padding: 5px;
  font-size:10pt;
  font-family:arial;
  background-color: #6D778A;
  transition: all 0.3s;
}

.custom-radio input[type="radio"] {
  display: inline-block;
}

.custom-radio input[type="radio"]:checked + label {
  background-color: #114ABB;
}

</style>

<form id="form1">
<div style="padding:20px;display:inline" class="custom-radio">
    <input type="radio" name="direction" id="direction0" value="left" />
    <label class="btn btn-default" for="direction0">left</label>
    <input type="radio" name="direction" id="direction1"  value="top" />
    <label class="btn btn-default" for="direction1">right</label>
</div>
</form>
    <hr>
<form id="form2">   

<div style="padding:20px;display:inline" class="custom-radio">
    <input type="radio" name="direction" id="direction0"  value="left" />
    <label class="btn btn-default" for="direction0">left</label>
    <input type="radio" name="direction" id="direction1"  value="top" />
    <label class="btn btn-default" for="direction1">right</label>
</div>
</form>

问题原因 #

HTML规范要求id属性必须在全局范围内唯一。你在两个表单中重复使用了direction0和direction1这两个id，浏览器解析label的for属性时，只会匹配页面中第一个拥有对应id的元素，因此form2的label会误触发form1里的radio按钮。

解决方案 #

方案1：给radio设置全局唯一的id

为不同表单内的radio添加表单标识前缀，确保id不重复，同步修改对应label的for属性：

<style>
.custom-radio label {
    color:#FFF;
    border-radius:20px;
  display: inline-block;
  width: 60px;
  padding: 5px;
  font-size:10pt;
  font-family:arial;
  background-color: #6D778A;
  transition: all 0.3s;
}

.custom-radio input[type="radio"] {
  display: inline-block;
}

.custom-radio input[type="radio"]:checked + label {
  background-color: #114ABB;
}
</style>

<form id="form1">
<div style="padding:20px;display:inline" class="custom-radio">
    <input type="radio" name="direction" id="form1-direction0" value="left" />
    <label class="btn btn-default" for="form1-direction0">left</label>
    <input type="radio" name="direction" id="form1-direction1"  value="top" />
    <label class="btn btn-default" for="form1-direction1">right</label>
</div>
</form>
<hr>
<form id="form2">   
<div style="padding:20px;display:inline" class="custom-radio">
    <input type="radio" name="direction" id="form2-direction0"  value="left" />
    <label class="btn btn-default" for="form2-direction0">left</label>
    <input type="radio" name="direction" id="form2-direction1"  value="top" />
    <label class="btn btn-default" for="form2-direction1">right</label>
</div>
</form>

方案2：将radio包裹在label内部（推荐）

无需依赖id和for关联，直接把radio放入label标签内，点击label区域即可触发内部的radio，彻底避免id冲突问题，同时代码更简洁：

<style>
.custom-radio label {
    color:#FFF;
    border-radius:20px;
  display: inline-block;
  width: 60px;
  padding: 5px;
  font-size:10pt;
  font-family:arial;
  background-color: #6D778A;
  transition: all 0.3s;
  cursor: pointer;
}

.custom-radio input[type="radio"] {
  display: none; /* 隐藏原生radio，仅展示自定义样式的label */
}

.custom-radio input[type="radio"]:checked + label {
  background-color: #114ABB;
}
</style>

<form id="form1">
<div style="padding:20px;display:inline" class="custom-radio">
    <label class="btn btn-default">
        <input type="radio" name="direction" value="left" />
        left
    </label>
    <label class="btn btn-default">
        <input type="radio" name="direction" value="top" />
        right
    </label>
</div>
</form>
<hr>
<form id="form2">   
<div style="padding:20px;display:inline" class="custom-radio">
    <label class="btn btn-default">
        <input type="radio" name="direction" value="left" />
        left
    </label>
    <label class="btn btn-default">
        <input type="radio" name="direction" value="top" />
        right
    </label>
</div>
</form>

内容的提问来源于stack exchange，提问作者sami salaam