首页 > 微信 > 详细

微信小程序-radio单选框点击选中,取消选择

时间:2020-12-02 00:05:17      阅读:236      评论:0      收藏:0      [点我收藏+]

思路分析

先来说明一下我们需要实现的最终效果:radio单选框点击选中,取消选择。我们可以通过给radio绑定一个点击事件(bindtap)来实现这一功能。

下面我们直接看代码:

1. WXML

<radio class=‘radioScale‘ checked="{{checked}}" bindtap="checked">单选框radio</radio>

  

2. JS

Page({
  data: {
    checked: false,
  },

    // 点击 选择事件
  checked: function(e) {
    var check = this.data.checked;
    if (check) {
      this.data.checked = false;
      console.log("已取消选中");
    } else {
      this.data.checked = true;
      console.log("已选中");
    }
    this.setData({
      "checked": this.data.checked,
    });
  },
})

  

3. WXSS

设置radio大小(根据自己需求进行样式设置)

 

/* 单选钮样式 */
.radioScale {
  transform: scale(0.7);
}

  

微信小程序-radio单选框点击选中,取消选择

原文:https://www.cnblogs.com/yinfengjiujian/p/14070679.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!