• 微信小程序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的再次点击取消掉选择

  • 相关阅读:
    3、选择排序(最小值/最大值)
    2、冒泡排序
    1、快速排序
    Stream操作
    1. 两数之和
    Mysql修改字段类型修改
    获取节假日
    mysql 前缀 + 编号 补0
    一口气说出 6种@Transactional注解的失效场景
    Activiti最全入门教程(基于Eclipse插件开发)
  • 原文地址:https://www.cnblogs.com/dududuzhaoji/p/9017913.html
Copyright © 2020-2023  润新知