推荐下载
-
2020-05-12 浏览：789
-
2020-04-04 浏览：654
-
2020-05-06 浏览：560
-
2020-05-08 浏览：545
-
2020-05-12 浏览：543
微信小程序radio点选框，再次点击取消
发布时间:2020-10-23radio点击当前选项，取消选择，在网上尝试找了很多方法都不生效，通过给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的再次点击取消掉选择。
