我有一個Vue應用程式，其中有一個帶有多組單選按鈕的HTML表單。
我使用 SO 答案寫在這里的
定制了它們的外觀。然而，當我點擊任何一個單選按鈕時，只有第一組單選按鈕受到影響，即使點擊不同組的單選按鈕也是如此。
這是html和css（JSFiddle 鏈接）
你知道為什么會發生這種情況嗎？
更新：問題出在label標簽上--它們的for屬性仍然被設定為第一組單選按鈕！
<div class="time_input"/span> >
<div class="time_input__radio_group"/span>>
<div class="radio_group">/span>
< input type="radio" name="start"/span> id="am"/span> : value="true" v-model="startInMorning">
<label class="radio_label" for="am"/span>> AM</label>。
</div>/span>
<div class="radio_group">
< input type="radio" name="start"/span> id="pm"/span> : value="false" v-model="startInMorning">
<label class="radio_label"/span> for="pm"/span>> PM</label>。
</div>/span>
</div>/span>
</div>/span>
<div class="day_open_input">
<div class="radio_group" >/span>
< input type="radio" name="day_open" id="one_day" 。 value="1" v-model="day_open" checked>
<label class="radio_label" for="am" /span>> 1</label>
</div>/span>
<div class="radio_group">
< input type="radio" name="day_open" id="wo_days" 。 value="2" v-model="day_open">
<label class="radio_label"/span> for="pm"/span>> 2</label>
</div>/span>
<div class="radio_group">
< input type="radio" name="day_open" id="three_days" 。 value="3" v-model="day_open">
<label class="radio_label"/span> for="pm"> 3</label>/span>
</div>/span>
</div>/span>
<div class="tracks_limit_input">/span>
<div class="radio_group"/span>>
< input type="radio" name=" tracks_limit" id="eight_songs" value="8" v-model=" tracks_limit" >
<label class="radio_label" for="am" > 8</label>
</div>/span>
<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"/span>>
<label class="radio_label"/span> for="pm"/span>> 16</label>
</div>/span>
</div>/span>
/*完全隱藏單選按鈕 */
input[type="radio"] {
display: none;
}
/* 使用偽選擇器模擬單選按鈕的外觀 */
input[type="radio"] *:before {
內容。"";
/* 創建自定義輻射按鈕外觀 */
display: inline-block;
width: 15px;
高度：15px。
padding: 3px;
margin-right: 5px;
/* 只有內容的背景色 */
background-clip: content-box;
邊界。1px solid #bbbbbb;
背景色。#e7e6e7;
border-radius: 50%;
}
/* 勾選的輻射按鈕的外觀 */
input[type="radio"]:checked label::before {
背景顏色: 黑色。
}
/* 重置默認的箱體大小 */
*,
*:before,
*:after {
box-sizing: border-box;
}
/* 輻射按鈕居中的可選樣式 */
.radio-group label {
display: inline-flex;
align-items: center;
}
uj5u.com熱心網友回復：
我認為css
你在HTML中使用的代碼才是導致問題的原因：
首先，它是Variety的代碼。
第一，它是Vue代碼，而不是純HTML代碼
。我將以第一組--time為例：
<div class="time_input"/span> >
<div class="time_input__radio_group"/span>>
<div class="radio_group">/span>
< input type="radio" name="start"/span> id="am"/span> : value="true" v-model="startInMorning">
<label class="radio_label" for="am"/span>> AM</label>。
</div>/span>
<div class="radio_group">
< input type="radio" name="start"/span> id="pm"/span> : value="false" v-model="startInMorning">
<label class="radio_label"/span> for="pm"/span>> PM</label>。
</div>/span>
</div>/span>
</div>/span>
兩個inputs都被設定為同一個模型startInMorning，所以如果它是真的，都會被選中，反之亦然。
所以修復方法是：
首先洗掉這兩個模型的v-model="startInMorning"
接下來改變:value
對于第一個:value="startInMorning"。
對于第二個 :value="!startInMorning"
對于其他的 :value="!startInMorning"
做類似的處理。
對其他人做類似的處理
uj5u.com熱心網友回復：問題似乎出在HTML上！
for標簽上的label屬性被設定為錯誤的單選按鈕
ie
< input type="radio" name="day_open" id="wo_days" 。 value="2" v-model="day_open">
<label class="radio_label"/span> for="pm"/span>> 2</label>
< input type="radio" name="day_open" id="wo_days" 。 value="2" v-model="day_open">
<label class="radio_label"/span> for="pm"/span>> 2</label>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/327393.html
標籤：