最近在项目实现一个问卷调研的功能，发现正常情况下，多选框是可以单击取消选中状态的，单选框就不行，单选框选中了就不能再取消，刚开始自己不知道怎么解决，然后自己百度了下，果然还是有大神解决了。

1、问题就是将input radio单选框改造成单击可以取消其选中状态

2、单纯的对input radio进行js控制行不通，因为radio是通过v-repeat出来的，有很多个，如果每一个都去获取元素的话，执行效率太低，failed

3、给radio添加click事件，判断checked属性，如果为true则取消checked，但由于radio每次click都会将自己的checked置为true（Vue的数据双向绑定速度也是很快的），数据赋值速度之快以至于每次click获取到的checked值都为true，failed

4、当一个radio从未选中到选中状态，会先触发click再触发change事件，因此只要在click事件判断当前radio是否触发了change事件，如果没触发change事件说明当前radio是选中状态，此时则把该radio的checked置为false，就可以实现单击选中状态的radio取消其选中状态

5、以上第4点有一个逻辑漏洞，因为click先触发，change后触发，那如何在click中判断当前radio是否触发了change呢？需要将click事件中的js判断逻辑手动放到change触发之后执行，则将click中的逻辑放在setTimeout延迟0秒，手动将这段逻辑执行排在了change事件队列的后面

赋上vue代码如下：

//tempalta里面的单选框
<input
  type="radio"
 :value="qitem.optionValue"
  class="radio float-left"
  @change="retainRecord"
  @click="controlSingel($event)"
 />
 // data里定义changed，
 //methods
   controlSingel($event) {
      let _this = this;
      window.setTimeout(() => {
        if (!this.changed) {
          $event.target.checked = false
           // 可以写些单选框没有选中的代码处理
        } 
        _this.changed = false;
      }, 0);
   },
   retainRecord(){
      // 可以写些单选框选中的代码处理
      this.changed = true;
   }

以上是本人实践，根据别人的链接说还可以将它封装为一个vue的指令，我这边暂时还没去实践到，所以没写进去,今天自己测了并优化了，可以把绑定 :checked="changed"去掉，正如作者所说的changed就作为判断依据而已
参考的链接：https://zhuanlan.zhihu.com/p/27130030?utm_source=wechat_session&utm_medium=social&s_s_i=wj4pPqmkaQX0sycM%2FWY0%2B%2BYGK5kx%2FAtls%2BqvpXR%2FrPg%3D&s_r=1