微信小程序如何实现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 相关文章推荐
js中eval详解
Mar 30 Javascript
到处都是jQuery选择器的年代 不了解它们的性能,行吗
Jun 18 Javascript
js控制文本框只能输入中文、英文、数字与指定特殊符号的实现代码
Sep 09 Javascript
JS去掉字符串前后空格、阻止表单提交的实现代码
Jun 08 Javascript
Vue网页html转换PDF(最低兼容ie10)的思路详解
Aug 24 Javascript
web前端开发中常见的多列布局解决方案整理(一定要看)
Oct 15 Javascript
解决angularjs中同步执行http请求的方法
Aug 13 Javascript
浅谈vue同一页面中拥有两个表单时,的验证问题
Sep 18 Javascript
nvm、nrm、npm 安装和使用详解(小结)
Jan 17 Javascript
使用apifm-wxapi快速开发小程序过程详解
Aug 05 Javascript
JS实现贪吃蛇游戏
Nov 15 Javascript
在JavaScript中如何使用宏详解
May 06 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
轻松修复Discuz!数据库
2008/05/03 PHP
PHP读取并输出XML文件数据的简单实现方法
2017/12/22 PHP
PHP封装的mysqli数据库操作类示例
2019/02/16 PHP
IE8 浏览器Cookie的处理
2009/01/31 Javascript
javascript new一个对象的实质
2010/01/07 Javascript
Javascript 实现的数独解题算法网页实例
2013/10/15 Javascript
smartcrop.js智能图片裁剪库
2015/10/14 Javascript
获取JavaScript异步函数的返回值
2016/12/21 Javascript
原生js二级联动效果
2017/06/20 Javascript
如何为你的JavaScript代码日志着色详解
2019/04/08 Javascript
vue 中 beforeRouteEnter 死循环的问题
2019/04/23 Javascript
关于Vue源码vm.$watch()内部原理详解
2019/04/26 Javascript
JS实现checkbox互斥(单选)功能示例
2019/05/04 Javascript
简单了解vue中的v-if和v-show的区别
2019/10/08 Javascript
vue滚动插件better-scroll使用详解
2019/10/18 Javascript
[52:31]VP vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
[01:03:41]完美世界DOTA2联赛PWL S3 DLG vs Phoenix 第一场 12.17
2020/12/19 DOTA
python简单读取大文件的方法
2016/07/01 Python
在Python 不同级目录之间模块的调用方法
2019/01/19 Python
详解Pandas之容易让人混淆的行选择和列选择
2019/07/10 Python
python suds访问webservice服务实现
2020/06/26 Python
详解Python中的路径问题
2020/09/02 Python
CSS3 box-shadow属性实例详解
2020/06/19 HTML / CSS
美国知名的时尚购物网站:Anthropologie
2016/12/22 全球购物
纪念建党演讲稿范文
2014/01/13 职场文书
初中毕业生的自我评价
2014/03/03 职场文书
供货协议书
2014/04/22 职场文书
大学生就业自我推荐信
2014/05/10 职场文书
设计师求职信
2014/07/01 职场文书
学校安全教育月活动总结
2014/07/07 职场文书
安全演讲稿开场白
2014/08/25 职场文书
纪念九一八事变83周年国旗下讲话稿
2014/09/15 职场文书
2014年幼儿园教研工作总结
2014/12/04 职场文书
2014年骨干教师工作总结
2014/12/19 职场文书
行政主管岗位职责范本
2015/04/09 职场文书
Python将CSV文件转化为HTML文件的操作方法
2021/06/30 Python