Vue表单自定义单选按钮样式后点击仅第一组生效问题排查

你遇到的异常完全是label标签的for属性绑定错误导致的，原理如下：

• HTML规范中id是全局唯一标识，label的for属性会匹配页面上第一个对应id的input元素，点击label就等价于点击匹配到的input。
• 你代码里除了第一组start时间单选按钮的label正确绑定了对应id（am、pm），后续days_open、tracks_limit分组下的所有label的for属性都错误绑定了am、pm，所以点击这些分组的label时，永远只会触发第一组对应id的单选按钮状态变化。

有两种常用修复方式，按需选择即可：

方案1：修正for和对应id的匹配关系 #

保证每组单选按钮的input的id全局唯一，且对应的label的for属性和同组input的id完全匹配，修正后的代码示例：

<div class="days_open_input">
  <div class="radio_group" >
    <input type="radio" name="days_open" id="one_day" :value="1" v-model="days_open" checked>
    <label class="radio_label" for="one_day">1</label>
  </div>
  <div class="radio_group">
    <input type="radio" name="days_open" id="two_days" :value="2" v-model="days_open">
    <label class="radio_label" for="two_days">2</label>
  </div>
  <div class="radio_group">
    <input type="radio" name="days_open" id="three_days" :value="3" v-model="days_open">
    <label class="radio_label" for="three_days">3</label>
  </div>
</div>
<div class="tracks_limit_input">
  <div class="radio_group">
    <input type="radio" name="tracks_limit" id="eight_songs" value="8" v-model="tracks_limit" >
    <label class="radio_label " for="eight_songs">8</label>
  </div>
  <div class="radio_group">
    <input type="radio" name="tracks_limit" id="sixteen_songs" value="16" v-model="tracks_limit" checked class="tracks_limit_input__margin">
    <label class="radio_label" for="sixteen_songs">16</label>
  </div>
</div>

方案2：嵌套写法省略for和id #

直接把input包裹在label标签内部，不需要配置for和id就能自动关联，完全避免全局id重复的问题，示例如下：

<div class="radio_group">
  <label class="radio_label">
    <input type="radio" name="days_open" :value="1" v-model="days_open" checked>
    1
  </label>
</div>

使用这种写法时你原有的自定义单选样式不需要做任何修改，即可正常生效。

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