vue取消单选按钮选中,所有类型通用简单明了

最新推荐文章于 2023-05-10 14:34:45 发布
最新推荐文章于 2023-05-10 14:34:45 发布
阅读量1.7k 收藏 1
点赞数 2
分类专栏： java Vue.js 文章标签： vue.js html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/MyAzhe0ci3/article/details/122959280
版权
java 同时被 2 个专栏收录
19 篇文章 1 订阅
订阅专栏
Vue.js
12 篇文章 0 订阅
订阅专栏
这段代码展示了在Vue中如何处理组件的禁用状态，并通过clickitemYandiTest方法来响应点击事件。当选项被选中时，如果其值与当前表单中的fundus字段匹配，则会取消选中并清空fundus字段。
摘要由CSDN通过智能技术生成 
<el-radio-group v-model="form.fundus" :disabled="detail">
                      <el-radio label="1" :disabled="detail"  @click.native="clickitemYandiTest($event)">正常</el-radio>
                      <el-radio label="2" :disabled="detail"  @click.native="clickitemYandiTest($event)">异常</el-radio>
                    </el-radio-group>

  clickitemYandiTest($event){
      let _this = this;
      let objVal = _this.form.fundus;
      // alert(this.yandiFlags)
      window.setTimeout(() => {
      if (!!objVal && objVal == $event.target.value) {

        $event.target.checked = false
        _this.form.fundus = ''
      }
    }, 0);

     
    }
MyAzhe0ci3
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue2单选框点击后可取消勾选的一种解决办法
billowson的博客
10-25 2496
Vue2单选框点击后可取消勾选的一种解决办法
elementui的单选选中之后可以取消的方法
m0_59638694的博客
09-01 3141
elementui单选选中之后可以取消
Ant-Design-Vue 单击取消单选框radio选中效果
学而不思则忘，思而不学则die
07-21 4912
主要是通过当前对应的值来判断。例子：选项A、B分别对应值0、1，分别对两个单选框进行判断：如果当前值为0，即选中选项A，此时再点击选项A则将值置空；选项B同理。 //<template> <a-radio-group v-model="radioData"> <a-radio-button :value="0" @click="A">是</a-radio-button> <a-radio-button :value="1" @...
vue循环中点击选中再点击取消(单选)的实现
10-14
主要介绍了vue循环中点击选中再点击取消(单选)的实现，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue单选按钮，重复点击可取消选中
tt1234561009的博客
05-10 2869
项目开发中常用的单选组件例如el-radio、u-radio 组件自身是不支持取消选中，一旦选择了就只能切换选项不能取消选中。而实际开发中有些需求是希望单选按钮不但能够切换同时还允许取消选择。
关于vue 单选框选中与取消解决方案
weixin_43541909的博客
11-03 7448
在网上找了很久也没有找到自己想要的解决方案，于是乎自己便想了一个简单粗暴的解决方案。首先考虑radio是单选框，且vue的v-model赋值速度非常的快，取消选择又不会触发 radio 的 change 事件，使用click事件去单纯的修改值会导致选中值瞬间勾选与取消了勾选。达不到想要的效果，可以考虑这种情形，因为radio的双向绑定，值是瞬间变化的，所以可以用一个 oldValue去保留上一次点击选中的值，这样去勾选时就不会影响到 oldValue ，保留拿到了oldValue值后，用 oldValue
vue点击取消再点击选中（单选）
在北风吹起的时候加入我们的队伍 在秋雨到来的时候成为彼此的温暖
04-14 1万+
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>单选（点击选中，点击取消）</title> <script src="https://cdn.bootcss.com/vue/2.5.22/vue.js"&g...
vue单选框选中_vue1中radio单选框单击取消选中状态
weixin_39754142的博客
12-19 1629
咳咳。。。如标题所讲，看起来好简单的样子，但是这个需求在一个Vue架构的中大型项目中实现起来又貌似不是想象中的那么容易。以下是我的思路，愚见求各位大佬指教。分析：1、问题就是将input radio单选框改造成单击可以取消其选中状态2、单纯的对input radio进行js控制行不通，因为radio是通过v-repeat出来的，有很多个，如果每一个都去获取元素的话，执行效率太低，failed3、...
uView Radio 单选框实现取消选中状态
weixin_47027779的博客
01-29 2166
uView Radio 单选框实现取消选中状态
vue 全选与取消全选
06-04 225
所用知识点 1 v-model：监听input内容 2 watch:监听属性方法 参考https://cn.vuejs.org/v2/api/#watch 3 页面初始化调用函数 mounted 一：html元素 实现思路 1 v-model 一个收集所有input（除全选框外）数组checkModel ，vue会动态将其checked为true的inpu...
vue 实现单选框设置默认选中值
10-16
今天小编就为大家分享一篇vue 实现单选框设置默认选中值，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
三种取消选中单选框radio的方法
12-09
本文提供了三种取消选中radio的方式，代码示例如下: 本文依赖于jQuery,其中第一种，第二种方式是使用jQuery实现的，第三种方式是基于JS和DOM实现的。 <!DOCTYPE HTML> <html> <head> <title>单选按钮取消选中的三种方式</title> [removed] [removed] [removed] $(function(){ // var $br
vue3实现单选效果且再次点击可取消选择
weixin_62426826的博客
09-16 2148
最近碰到一个需求，需要实现单选效果，且再次点击之后可取消选择。 拿到这个需求，自然而然想到了用el-radio来做。但是也遇到了很多不大不小的坑。
vue中radio单选框单击取消选中状态
热门推荐
BIlly Feng的博客
05-14 1万+
最近在项目实现一个问卷调研的功能，发现正常情况下，多选框是可以单击取消选中状态的，单选框就不行，单选框选中了就不能再取消，刚开始自己不知道怎么解决，然后自己百度了下，果然还是有大神解决了。 1、问题就是将input radio单选框改造成单击可以取消其选中状态 2、单纯的对input radio进行js控制行不通，因为radio是通过v-repeat出来的，有很多个，如果每一个都去获取元素的话，执行效率太低，failed 3、给radio添加click事件，判断checked属性，如果为true则取消ch
使用vue，两个按钮只能选择一个，且点击同一个按钮，把选择状态去除
llovege的博客
02-20 1万+
在这里插入代码片
Vue实现简单的按钮选中和取消功能
qq_41294224的博客
10-24 5392
效果图： html代码： <!doctype html> <html lang="en"> <head> <title>Title</title> <!-- Required meta tags --> <meta charset="utf-8"> <meta name...
a-radio 再次点击时取消选(vue3+antd)
weixin_43811713的博客
03-22 1676
a-radio 单选组，单选按钮选中时再点击则取消选中效果。 antd+vue3（虽然没有体现出）
elementUi 按钮点击之后取消状态
qq_29236119的博客
02-03 4479
elementUi 中的按钮，点击操作之后按钮的状态会一直存在，如果想要取消的话就手动触发一下，如下： let target = evt.target; if(target.nodeName == "SPAN"){ target = evt.target.parentNode; } target.blur(); 点击的时候去执行这些代码，需要注意的是要看看按钮的文字是不是在span标签内，如果在button里没有span标签就直接evt.target.blur();就可以了 ...
vue 单选按钮取消选中
最新发布
06-03
在 Vue 中取消单选按钮的选中状态，可以通过以下几种方式实现： 1. 使用 v-model 指令绑定单选按钮选中状态的变量，并将其设置为 null 或者 undefined。 ``` <template> <div> <label> <input type="radio" v-model="selected" value="A"> A </label> <label> <input type="radio" v-model="selected" value="B"> B </label> <label> <input type="radio" v-model="selected" value="C"> C </label> <button @click="reset">取消选择</button> </div> </template> <script> export default { data() { return { selected: null }; }, methods: { reset() { this.selected = null; } } }; </script> ``` 2. 使用 ref 属性获取单选按钮的 DOM 元素，然后在代码中手动修改其选中状态。 ``` <template> <div> <label> <input type="radio" ref="radio1" v-model="selected" value="A"> A </label> <label> <input type="radio" ref="radio2" v-model="selected" value="B"> B </label> <label> <input type="radio" ref="radio3" v-model="selected" value="C"> C </label> <button @click="reset">取消选择</button> </div> </template> <script> export default { data() { return { selected: null }; }, methods: { reset() { this.$refs.radio1.checked = false; this.$refs.radio2.checked = false; this.$refs.radio3.checked = false; this.selected = null; } } }; </script> ``` 请注意，以上代码仅为示例，具体实现方式应根据您的具体业务场景进行调整。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值