自定义Radio Selector失效：第二个单选组无法选中求助

问题出在第二个单选组的label和input关联匹配错误，跟新增样式类、ID唯一性无关——你已经给不同组设置了不同的name属性（timeline和tradein），这部分逻辑是对的，不会造成组间冲突。

具体错误点 #

第二个单选组里的labelfor属性和对应input的id完全不匹配：

• input的id是tradein_y，但label的for写的是trade in yes（带空格，和id不一致）
• input的id是tradein_n，label的for写的是trade in no（同样不匹配）

label的for属性必须和对应input的id完全一致，点击label才能触发radio选中，现在匹配不上，所以点了没反应。

修正后的代码 #

CSS（无需修改）

input[type=radio] {
  position: absolute;
  visibility: hidden;
  display: none;
}

label {
  display: inline-block;
  cursor: pointer;
  font-weight: bold;
  padding: 5px 20px;
}

input[type=radio]:checked+label {
  color: #fff;
  background: #444;
  border-radius: 5px;
}

label+input[type=radio]+label {
  border-left: solid 3px #444;
}

.radio-group {
  display: inline-block;
  overflow: hidden;
}

HTML（修正label的for属性）

<div class="radio-group">
  <input type="radio" id="lessthan6months" name="timeline"><label for="lessthan6months">6 mo</label>
  <input type="radio" id="6to12months" name="timeline"><label for="6to12months">6-12 mo</label>
  <input type="radio" id="12to24months" name="timeline"><label for="12to24months">12-24 mo</label>
  <div class="line"></div>
</div>

<div class="radio-group">
  <input type="radio" id="tradein_y" name="tradein" value="Yes"><label for="tradein_y">Yes</label>
  <input type="radio" id="tradein_n" name="tradein" value="No"><label for="tradein_n">No</label>
  <div class="line"></div>
</div>

关键注意事项 #

• 每个radio的id必须唯一（你已经做到），label的for要严格对应这个id，不能有拼写错误、空格差异
• 同一组单选按钮的name属性必须相同，不同组的name必须不同，保证组内互斥、组间独立
• 不需要新增样式类，现有样式已经支持多组单选按钮

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