微信小程序如何实现radio单选框单击打勾和取消


Posted in Javascript onJanuary 21, 2020

前端使用input 来写radio,小程序使用radio标签 也可以使用<radio />单标签

1.自定义radio样式、

wx默认的是真的丑

/* 单选框样式 */
   /* 初始样式 */
 radio .wx-radio-input{
 width: 32rpx;
 height: 32rpx;
 border-radius: 0

}
/* 选中后的 背景样式 ( 背景 边框 ) */
radio .wx-radio-input.wx-radio-input-checked{
 width: 32rpx; /* 选中后对勾大小,不要超过背景的尺寸 */
 height: 32rpx; /* 选中后对勾大小,不要超过背景的尺寸 */
  
 background:white!important;
}
/* 选中后的 对勾样式  */
radio .wx-radio-input.wx-radio-input-checked::before{
  
 width: 32rpx; /* 选中后对勾大小,不要超过背景的尺寸 */
 height: 32rpx; /* 选中后对勾大小,不要超过背景的尺寸 */
 line-height: 32rpx;
 text-align: center;
 font-size:36rpx; /* 对勾大小 */
 color:black; /* 对勾颜色  */
  
 background: white;
 transform:translate(-50%, -50%) scale(1);
 -webkit-transform:translate(-50%, -50%) scale(1);
}

2.单选打勾再选打勾取消效果

wxml:

<radio checked='{{check}}' id="radios" bindtap='radiocon'></radio><label for="radios">匿名</label>

wx.js

//这条代码在data里写
 check:false
radiocon:function(e){  
  this.setData({
   check: !this.data.check
   })
  console.log("用户打勾的是 ",this.data.check)
 },

这样 就完成了单击打勾再击取消。

以上。

Javascript 相关文章推荐
在修改准备发的批量美化select+可修改select时,在非IE下发现了几个问题
Jan 09 Javascript
整理的比较全的event对像在ie与firefox浏览器中的区别
Nov 25 Javascript
基于jquery实现的可编辑下拉框实现代码
Aug 02 Javascript
javascript实现tab切换的四种方法
Nov 05 Javascript
基于JS实现PHP的sprintf函数实例
Nov 14 Javascript
快速掌握Node.js事件驱动模型
Mar 21 Javascript
JavaScript中输出信息的方法(信息确认框-提示输入框-文档流输出)
Jun 12 Javascript
AngularJS使用ng-Cloak阻止初始化闪烁问题的方法
Nov 03 Javascript
微信小程序 闭包写法详细介绍
Dec 14 Javascript
vue的常用组件操作方法应用分析
Apr 13 Javascript
微信小程序和百度的语音识别接口详解
May 06 Javascript
给原生html中添加水印遮罩层的实现示例
Apr 02 Javascript
微信小程序仿淘宝热搜词在搜索框中轮播功能
Jan 21 #Javascript
微信小程序swiper实现文字纵向轮播提示效果
Jan 21 #Javascript
jquery将信息遍历到界面上实例代码
Jan 21 #jQuery
微信浏览器下拉黑边解决方案 wScroollFix
Jan 21 #Javascript
修改vue源码实现动态路由缓存的方法
Jan 21 #Javascript
微信小程序图片自适应实现解析
Jan 21 #Javascript
微信小程序button标签open-type属性原理解析
Jan 21 #Javascript
You might like
php中http与https跨域共享session的解决方法
2014/12/20 PHP
Laravel6.18.19如何优雅的切换发件账户
2020/06/14 PHP
Javascript倒计时页面跳转实例小结
2013/09/11 Javascript
Jquery easyUI 更新行示例
2014/03/06 Javascript
我的Node.js学习之路(四)--单元测试
2014/07/06 Javascript
JavaScript中实现PHP的打乱数组函数shuffle实例
2014/10/11 Javascript
纯js模拟div层弹性运动的方法
2015/07/27 Javascript
angularjs ui-router中路由的二级嵌套
2017/03/10 Javascript
纯JS实现出生日期[年月日]下拉菜单效果
2018/06/01 Javascript
element上传组件循环引用及简单时间倒计时的实现
2018/10/01 Javascript
VUE引入第三方js包及调用方法讲解
2019/03/01 Javascript
vue中使用vee-validator完成表单校验方案
2019/11/01 Javascript
node.js使用zlib模块进行数据压缩和解压操作示例
2020/02/12 Javascript
RxJS在TypeScript中的简单使用详解
2020/04/13 Javascript
原生JS运动实现轮播图
2021/01/02 Javascript
[01:02:10]DOTA2上海特级锦标赛B组小组赛#2 VG VS Fnatic第一局
2016/02/26 DOTA
[03:27]最受玩家喜爱奖提名:PZH_Element 致玩家寄语
2016/12/20 DOTA
[52:27]2018DOTA2亚洲邀请赛 3.31 小组赛B组 paiN vs Secret
2018/04/01 DOTA
[05:15]2018年度CS GO社区贡献奖-完美盛典
2018/12/16 DOTA
基于python的汉字转GBK码实现代码
2012/02/19 Python
Python实现在线音乐播放器
2017/03/03 Python
Python读取本地文件并解析网页元素的方法
2018/05/21 Python
Django框架模板注入操作示例【变量传递到模板】
2018/12/19 Python
Python对接 xray 和微信实现自动告警
2019/09/17 Python
新版Pycharm中Matplotlib不会弹出独立的显示窗口的问题
2020/06/02 Python
Python filter()及reduce()函数使用方法解析
2020/09/05 Python
美国皮靴公司自1863年:The Frye Company
2016/11/30 全球购物
澳大利亚领先的在线药房:Pharmacy Online(有中文站)
2020/02/22 全球购物
澳大利亚第一旅行车和房车配件店:Caravan RV Camping
2020/12/26 全球购物
SQL中where和having的区别
2012/06/17 面试题
商场活动策划方案
2014/01/24 职场文书
上班玩游戏检讨书
2014/02/07 职场文书
二年级数学教学反思
2016/02/16 职场文书
职业生涯规划书之大学四年
2019/08/07 职场文书
【TED出品】天梯非主流开心游1700 划水骑士
2022/03/31 魔兽争霸
Python尝试实现蒙特卡罗模拟期权定价
2022/04/21 Python