样式单选按钮会破坏功能答案

【问题标题】：Styling Radio Button Breaks Functionality样式单选按钮会破坏功能
【发布时间】：2023-04-07 04:25:01
【问题描述】：

我有一个带有多组单选按钮的 HTML 表单的 Vue 应用程序。

我使用 SO 答案 written here 自定义了它们的外观

但是，当我单击任何单选按钮时，只有第一组单选按钮会受到影响，即使单击不同组的单选按钮也是如此。

这是 html 和 css (JSFiddle link)

知道为什么会这样吗？

更新：问题出在label 标签上——它们的for 属性仍然设置为第一组单选按钮！


                            <div class="time_input" >
                              <div class="time_input__radio_group">
                                <div class="radio_group">
                                  <input type="radio" name="start" id="am" :value="true" v-model="startInMorning">
                                  <label class="radio_label" for="am">AM</label>
                                </div>
                                <div class="radio_group">
                                  <input type="radio" name="start" id="pm" :value="false" v-model="startInMorning">
                                  <label class="radio_label" for="pm">PM</label>
                                </div>
                              </div>
                            </div>
                            <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="am">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="pm">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="pm">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="am">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="pm">16</label>
                              </div>
                            
                            </div>

/* completely hiding radio button */
input[type="radio"] {
  display: none;
}

/* simulate radiobutton appearance using pseudoselector */
input[type="radio"] + *::before {
  content: "";
  /* create custom radiobutton appearance */
  display: inline-block;
  width: 15px;
  height: 15px;
  padding: 3px;
  margin-right: 5px;
  /* background-color only for content */
  background-clip: content-box;
  border: 1px solid #bbbbbb;
  background-color: #e7e6e7;
  border-radius: 50%;
}

/* appearance of checked radiobutton */
input[type="radio"]:checked + label::before {
  background-color: black;
}

/* resetting default box-sizing */
*,
*:before,
*:after {
  box-sizing: border-box;
}

/* optional styles for centering radiobuttons */
.radio-group label {
  display: inline-flex;
  align-items: center;
}

【问题讨论】：

标签： html css vue.js

【解决方案1】：

我觉得css没有错

您用于 HTML 的代码是导致问题的原因之一：

第一个是 Vue 代码而不是纯 HTML 代码

我将参加第一组 - time 示例：

<div class="time_input" >
    <div class="time_input__radio_group">
        <div class="radio_group">
            <input type="radio" name="start" id="am" :value="true" v-model="startInMorning">
            <label class="radio_label" for="am">AM</label>
        </div>
        <div class="radio_group">
            <input type="radio" name="start" id="pm" :value="false" v-model="startInMorning">
            <label class="radio_label" for="pm">PM</label>
        </div>
    </div>
</div>

inputs 都设置为相同的模型startInMorning，因此如果为 true，则两者都选中，反之亦然。

所以解决方法是：

首先删除两者的v-model="startInMorning"

接下来更改:value

对于第一个:value="startInMorning"，第二个:value="!startInMorning"

为他人做类似的事情

【讨论】：

您好，抱歉！我更新了线程以进行澄清 - 这确实是一个 vue 应用程序。尽管如此，我还是按照您的建议发现了同样的问题（当我删除额外的 CSS 类时 - HTML 工作正常）
找到解决方案！更新了原始问题

【解决方案2】：

问题似乎出在 HTML 上！

label 标签上的for 属性设置为错误的单选按钮

即

<input type="radio" name="days_open" id="two_days" :value="2" v-model="days_open">
                                <label class="radio_label" for="pm">2</label>
<input type="radio" name="days_open" id="two_days" :value="2" v-model="days_open">
                                <label class="radio_label" for="pm">2</label>

【讨论】：