需求:项目中对于有些单选内容可以设置默认选中,也可以不设置默认选中,而一般使用radio后,选中其中一个后,就无法让全部的radio恢复到一开始的未选中状态,如下图:
后面的单选框只能三选一,并且也可以全部不选,同时如果选中了其中一个后,也可以取消,最终可以回到全部不选的状态。
接下来介绍下如何实现单选框取消选中的方法:
// HTML代码 <div v-for="day in weekSelectList" :key="day.id" class="select__day"> <input type="radio" name="week" :id="day.label" :value="day.value" v-model="selectedDay" @click="onClick(day.value)" /> <label :for="day.label">{{ day.label }}({{ day.value }})</label> </div>
// vue3 + ts中的js代码 setup() { // 单选数据 const weekSelectList = [ { label: "周一", value: "2018-12", id: 1 }, { label: "周二", value: "2018-13", id: 2 }, { label: "周三", value: "2018-14", id: 3 }, { label: "周四", value: "2018-15", id: 4 }, { label: "周五", value: "2018-16", id: 5 }, ]; // selectedDay 双向绑定值 如果想要默认选中,修改初始值就行 ,这里我默认不选中,所以为"" const selectedDay = ref(""); const onClick = (val: any) => { // 判断当前的数据是否与绑定的值相同 if (val == selectedDay.value) { selectedDay.value = ""; // 相同则取消选中将 selectedDay的值重置为"" } else { selectedDay.value = val; // 不同就将当前的值赋予selectedDay } }; return { weekSelectList, selectedDay, onClick, }; },
最后结果,如下图: