实现单选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默认选中,并进行额外的确认操作。



posted @   霏霜  阅读(526)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)
点击右上角即可分享
微信分享提示