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

Posted 乐多呀

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了微信小程序radio点选框,再次点击取消相关的知识,希望对你有一定的参考价值。

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

以上是关于微信小程序radio点选框,再次点击取消的主要内容,如果未能解决你的问题,请参考以下文章

微信小程序学习 radio如何取消选择,多个radio选择其中一个

js怎么实现点击选中,再次点击取消。

微信小程序里怎么控制两个只能选择一个的?

微信小程序 单选框实现

微信小程序 全选和取消全选

微信小程序 单选框选中之后为啥取消不了