vue中radio單選框如何實現取消選中狀態問題
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>
總結
以上為個人經驗,希望能給大傢一個參考,也希望大傢多多支持WalkonNet。