radio点击当前选项,取消选择,在网上尝试找了很多方法都不生效,通过给radio绑定一个点击事件(
bindtap)来实现这一功能,直接看代码:
index.wxml:
<view class="page"> <view class="page__hd"> <text class="page__title">radio</text> <text class="page__desc">单选框</text> </view> <view class="page__bd"> <view class="section section_gap"> <radio-group class="radio-group" bindchange="radioChange"> <radio class="radio" bindtap = "bindtap1" wx:for-items="{{items}}" wx:key="name" value="{{item.name}}" checked = "{{item.checked}}"> <text>{{item.value}}</text> </radio> </radio-group> </view> </view> </view>
index.wss:
.radio-group { border-bottom: 1px solid #ddd; } .radio { display: block; border-top: 1px solid #ddd; padding: 5px; }
index.js:
Page({ data: { items: [ { name: \'USA\', value: \'美国\', checked:false}, { name: \'CHN\', value: \'美国\', checked: true }, { name: \'BRA\', value: \'巴西\', checked: false}, { name: \'JPN\', value: \'日本\', checked: false}, { name: \'ENG\', value: \'英国\', checked: false}, { name: \'FRA\', value: \'法国\', checked: false}, ], aa:\'CHN\' }, bindtap1:function(e){ var items = this.data.items; for (var i = 0; i < items.length; i++){ if (items[i].name == this.data.aa){ for (var j = 0; j < items.length; j++) { // console.log("items[j].checked = ", items[j].checked); if (items[j].checked && j != i) { items[j].checked = false; } } items[i].checked = !(items[i].checked); console.log("-----:" ,items); // this.setData(this.data.items[i]); } } this.setData({ items: items }); }, radioChange: function (e) { // for(var i = 0;i<this.data.items.length;i++){ // if (this.data.items[i].checked){ // // console.log(\'radio发生change事件,携带value值为:\', this.data.items[i].name) // } // } this.data.aa = e.detail.value; console.log(this.data.aa); } })
通过这样就可以实现radio的再次点击取消掉选择