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

  • 相关阅读:
    第五章 项目范围管理
    一位华为IT总监的12大职场经验谈
    接到面试通知后该做什么
    经验借鉴:外包失败三条血泪经验分享
    项目范围管理收集需求
    绝对不能对老板说的十句傻话
    项目整合实施整体变更控制
    项目整合结束项目或阶段
    9招助你夺取更高职位
    IT人写好简历的原则与方法
  • 原文地址:https://www.cnblogs.com/dududuzhaoji/p/9017913.html
Copyright © 2011-2022 走看看