微信小程序如何实现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 提交和设置表单的值
Dec 19 Javascript
JavaScript 常用函数
Dec 30 Javascript
jQuery 表格插件整理
Apr 27 Javascript
javascript 判断字符串是否包含某字符串及indexOf使用示例
Oct 18 Javascript
jQuery中last()方法用法实例
Jan 06 Javascript
JavaScript获得url所有参数键值表的方法
Mar 21 Javascript
jQuery学习笔记——jqGrid的使用记录(实现分页、搜索功能)
Nov 09 Javascript
详解Node.js access_token的获取、存储及更新
Jun 20 Javascript
BootStrap selectpicker后台动态绑定数据的方法
Jul 28 Javascript
vue实现word,pdf文件的导出功能
Jul 31 Javascript
服务端预渲染之Nuxt(使用篇)
Apr 08 Javascript
JS插件amCharts实现绘制柱形图默认显示数值功能示例
Nov 26 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
福利彩票幸运号码自动生成器
2006/10/09 PHP
发布一个迷你php+AJAX聊天程序[聊天室]提供下载
2007/07/21 PHP
三个思路解决laravel上传文件报错:413 Request Entity Too Large问题
2017/11/13 PHP
关于laravel5.5的定时任务详解(demo)
2019/10/23 PHP
js的event详解。
2006/09/06 Javascript
javascript 静态对象和构造函数的使用和公私问题
2010/03/02 Javascript
基于Jquery的文字自动截取(提供源代码)
2011/08/09 Javascript
仿猪八戒网左下角的文字滚动效果
2011/10/28 Javascript
javascript获得网页窗口实际大小的示例代码
2013/09/21 Javascript
Jquery弹出层插件ThickBox的使用方法
2014/12/09 Javascript
JQuery的ON()方法支持的所有事件罗列
2015/02/28 Javascript
详解JavaScript对W3C DOM模版的支持情况
2015/06/16 Javascript
简述AngularJS相关的一些编程思想
2015/06/23 Javascript
javascript与Python快速排序实例对比
2015/08/10 Javascript
前端框架Vue.js中Directive知识详解
2016/09/12 Javascript
基于jQuery实现中英文切换导航条效果
2016/09/18 Javascript
js实现简单的获取验证码按钮效果
2017/03/03 Javascript
Vue 全局loading组件实例详解
2018/05/29 Javascript
解决vue热替换失效的根本原因
2018/09/19 Javascript
vue axios 简单封装以及思考
2018/10/09 Javascript
js常见遍历操作小结
2019/06/06 Javascript
Vue实现指令式动态追加小球动画组件的步骤
2020/12/18 Vue.js
[55:18]Liquid vs Chaos 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
[01:05:59]Mineski vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.22
2019/09/05 DOTA
[02:58]魔廷新尊——痛苦女王至宝语音台词节选
2020/06/14 DOTA
在Python的Django框架中获取单个对象数据的简单方法
2015/07/17 Python
对python 匹配字符串开头和结尾的方法详解
2018/10/27 Python
python 对任意数据和曲线进行拟合并求出函数表达式的三种解决方案
2020/02/18 Python
Python利用for循环打印星号三角形的案例
2020/04/12 Python
Python requests模块安装及使用教程图解
2020/06/30 Python
Python eval函数介绍及用法
2020/11/09 Python
pycharm配置python 设置pip安装源为豆瓣源
2021/02/05 Python
简单几步用纯CSS3实现3D翻转效果
2019/01/17 HTML / CSS
美国复古街头服饰精品店:Need Supply Co.
2017/02/22 全球购物
CHARLES & KEITH台湾官网:新加坡时尚品牌
2019/07/30 全球购物
css 中多种边框的实现小窍门
2021/04/07 HTML / CSS