zoukankan      html  css  js  c++  java
  • 微信小程序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的再次点击取消掉选择

  • 相关阅读:
    Linux编译安装中configure、make和make install各自的作用
    转载的 Linux下chkconfig命令详解
    MYSQL主从不同步延迟原理分析及解决方案(摘自http://www.jb51.net/article/41545.htm)
    mysql主从延迟(摘自http://www.linuxidc.com/Linux/2012-02/53995.htm)
    http://ninghao.net/video/1554不错的学习网址
    javascript 内置对象和方法
    javascript 函数
    javascript 基础
    css z-index
    css 透明度
  • 原文地址:https://www.cnblogs.com/dududuzhaoji/p/9017913.html
Copyright © 2011-2022 走看看