radio单选框支持取消勾选

4,293 阅读1分钟

正常情况下radio不支持取消勾选,需要触发原生的点击事件来取消勾选

不管是在原生JavaScript情况下还是vue,react,uniapp的框架上,都能相应的实现其功能

<template lang="pug">
  div
    el-radio(v-model="radio" label="1" @click.native.prevent="onRadioChange('1')")  备选项1
    el-radio(v-model="radio" label="2" @click.native.prevent="onRadioChange('2')") 备选项2
</template>

<script>
export default {
  data() {
    return {
      radio: "1",
    };
  },
  methods:{
    onRadioChange(e){
     // 当点击已经选中的把 radio 置空,就是取消选中,并返回
      if (this.radio === e) {
        this.radio = ''
        return
      }
     // 不是选中,选中当前点击 Radio
      this.radio = e
    }
  }
};
</script>

image.png

image.png