实现radio单选框单击取消选中状态

需求：项目中对于有些单选内容可以设置默认选中，也可以不设置默认选中，而一般使用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,
  };
},

最后结果，如下图：