vue中radio单选框如何实现取消选中状态问题

西丽玛哈 · 发表于 2023-5-12 17:03:43

vue radio单选框如何取消选中状态

客户需求

单选radio选中后，再次点击需要可以取消选择功能
页面有很组多单选，要实现一个方法就能兼容
话不多说直接上代码

<span v-for="item in radioData" :key="item.value">
<input type="radio" @click="chcekRadio($event)" name="abutmentVal" v-model="myData.abutmentVal" :id="'Abutment'+ item.id" :value="item.id" />
<label :for="'Abutment'+ item.id" :value="item.id">{{ item.name }}</label>
</span>

复制代码

//vue中radio单选框单击取消选中状态
chcekRadio ($event) {
let _this = this;
let objVal = _this.myData[$event.target.name];
window.setTimeout(() => {
if (!!objVal && objVal == $event.target.value) {
$event.target.checked = false
_this.myData[$event.target.name] = ''
}
}, 0);
},

复制代码

如何获取radio的选中值、选中状态

方法1

设置v-model

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id='app'>
<input type="radio" name="test" v-for="(item,index) in list" :value="item.value" v-model="checkedValue">
<button @click="test">获取选中的值</button>
</div>
<script>
var vm = new Vue({
el:'#app',
data(){
return{
checkedValue:'',
list:[{value:1},{value:2},{value:3}]
}
},
methods:{
test(){
console.log('被选中的值为:'+this.checkedValue)
}
}
});
</script>
</body>
</html>

复制代码

方法2

如果不想每次点击都判断，那就提供一个思路，定义一个radio数组list，每项设置一个isCheck标识，循环该数组渲染radio，点击按钮时再统一去判断

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id='app'>
<input type="radio" name="test" v-for="(item,index) in list" :value="item.value" :checked="item.isCheck" @change="changeInput(index)">
<button @click="test">获取选中的值</button>
</div>
<script>
var vm = new Vue({
el:'#app',
data(){
return{
list:[{value:1,isCheck:false},{value:2,isCheck:false},{value:3,isCheck:false}]
}
},
methods:{
changeInput(index){
this.list.map((v,i)=>{
if(i==index){
v.isCheck = true
}else{
v.isCheck = false
}
})
},
test(){
this.list.map((v,i)=>{
if(v.isCheck){
console.log('被选中的值为:'+v.value)
}
})
}
}
});
</script>
</body>
</html>

复制代码

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

来源:https://www.jb51.net/article/284082.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】我们会及时删除侵权内容，谢谢合作！