目录
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>
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持。
