回复 刷新

暂无评论

微信小程序radio点选框,再次点击取消

radio点击当前选项,取消选择,在网上尝试找了很多方法都不生效,通过给radio绑定一个点击事件(bindtap)来实现这一功能,直接看代码:

index.wxml:

  1. <view class="page">
  2. <view class="page__hd">
  3. <text class="page__title">radio</text>
  4. <text class="page__desc">单选框</text>
  5. </view>
  6. <view class="page__bd">
  7. <view class="section section_gap">
  8. <radio-group class="radio-group" bindchange="radioChange">
  9. <radio class="radio" bindtap = "bindtap1" wx:for-items="{{items}}" wx:key="name" value="{{item.name}}" checked = "{{item.checked}}">
  10. <text>{{item.value}}</text>
  11. </radio>
  12. </radio-group>
  13. </view>
  14. </view>
  15. </view>

index.wss:

  1. .radio-group {
  2. border-bottom: 1px solid #ddd;
  3. }
  4. .radio {
  5. display: block;
  6. border-top: 1px solid #ddd;
  7. padding: 5px;
  8. }

index.js:

  1. Page({
  2. data: {
  3. items: [
  4. { name: 'USA', value: '美国', checked:false},
  5. { name: 'CHN', value: '美国', checked: true },
  6. { name: 'BRA', value: '巴西', checked: false},
  7. { name: 'JPN', value: '日本', checked: false},
  8. { name: 'ENG', value: '英国', checked: false},
  9. { name: 'FRA', value: '法国', checked: false},
  10. ],
  11. aa:'CHN'
  12. },
  13. bindtap1:function(e){
  14. var items = this.data.items;
  15. for (var i = 0; i < items.length; i++){
  16. if (items[i].name == this.data.aa){
  17. for (var j = 0; j < items.length; j++) {
  18. // console.log("items[j].checked = ", items[j].checked);
  19. if (items[j].checked && j != i) {
  20. items[j].checked = false;
  21. }
  22. }
  23. items[i].checked = !(items[i].checked);
  24. console.log("-----:" ,items);
  25. // this.setData(this.data.items[i]);
  26. }
  27. }
  28. this.setData({
  29. items: items
  30. });
  31. },
  32. radioChange: function (e) {
  33. // for(var i = 0;i<this.data.items.length;i++){
  34. // if (this.data.items[i].checked){
  35. // // console.log('radio发生change事件,携带value值为:', this.data.items[i].name)
  36. // }
  37. // }
  38. this.data.aa = e.detail.value;
  39. console.log(this.data.aa);
  40. }
  41. })

通过这样就可以实现radio的再次点击取消掉选择。

  • 0
  • 0
  • 0