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

2022-06-07 18:04:39 阅读：258 来源： 互联网

标签：deleteBeforeCreate checkbox false 复选 radio 单选 event

　　单选框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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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