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的再次点击取消掉选择。
|