实现单选radio与复选checkbox组合使用

　　单选框radio一般会进行互斥选择并且单击以后选且必须选择一个，现进行了一个简单开发，使得单选框在互斥的基础上可以取消选择，即两个都不选。同时将其中一个单选框关联了一组checkbox：选择checkbox复选a/b选项都会自动选择单选radioA，选择单选radioB会取消选择checkbox复选a/b所有选项。

代码部分：

　　<label class="col-sm-4 control-label">组合选择</label>
　　<div class="col-sm-8">
　　　　<div>
       　　<div><input type="radio" name="checkFlag" v-model="checkFlag" value="1" @click="tableSetClick($event)"/></div>
          <label>我是单选A</label>
          <label class="checkbox-inline">
             　　<input type="checkbox"
                       value="a"
                       v-model="deleteBeforeCreate"
                       @click.prevent="setClickExtra($event)"
                       >我是复选a
          </label>
          <label class="checkbox-inline">
                 <input type="checkbox"
                        value="b"
                        v-model="includeIndex"
                        @click="setClickExtra($event)"
                        >我是复选b
          </label>
          <div><input type="radio" name="checkFlag" v-model="checkFlag" value="2" @click="tableSetClick($event)"/></div>
          <label>我是单选B</label>
       </div>
    </div>

        // 单选可以取消选择，选择增加取消上方复选框选择
        tableSetClick:function($event){
            let _this = this;
　　　　　　　//存储原本的radio值进行比较
            let objVal = _this.checkFlag;
            setTimeout(function () {
                if (objVal && objVal == $event.target.value) {
                    if(objVal == 1){
                        _this.deleteBeforeCreate = false;
                        _this.includeIndex = false;
                    }
                    $event.target.checked = false
                    _this.checkFlag = ''
                }else if($event.target.value == 2){
                    _this.deleteBeforeCreate = false;
                    _this.includeIndex = false;
                }
            }, 0);
        },
         // 选中复选框自动选择创建
        setClickExtra:function($event){
            let _this = this;
            setTimeout(function () {
                if($event.target.value == 'a'){
                    if(!_this.deleteBeforeCreate){
                        if(一个额外的操作){
　　　　　　　　　　　　　　　　//这里对复选a进行一些额外的确认才可以选择
                            _this.deleteBeforeCreate = true;
                           if(_this.deleteBeforeCreate || _this.includeIndex){
                                _this.checkFlag = 1;
                           }
                        }
                    }else{
                        _this.deleteBeforeCreate = false;
                    }
                }else{
                    if(_this.deleteBeforeCreate || _this.includeIndex){
                        _this.checkFlag = 1;
                    }
                }
            },0);
        }

主要实现思路：

1.radio通过click事件传递$event，存储原本的radio值与$event.target.value进行比较，如果两值一致，证明是点击取消，将checked变为false。

2.radio与checkbox均绑定v-model，通过checkbox的model的true或false来进行复选与单选的联动。

3.使用prevent阻止checkbox默认选中，并进行额外的确认操作。

标签：deleteBeforeCreate,checkbox,false,复选,radio,单选,event
来源： https://www.cnblogs.com/DL6526/p/16352824.html