微信小程序如何实现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 相关文章推荐
jquery 回车事件实现代码
Aug 23 Javascript
获取offsetTop和offsetLeft值的js代码(兼容)
Apr 16 Javascript
JS 实现导航栏悬停效果(续)
Sep 24 Javascript
ie8本地图片上传预览示例代码
Jan 12 Javascript
Javascript基础教程之switch语句
Jan 18 Javascript
Bootstrap前端开发案例二
Jun 17 Javascript
原生JS实现风箱式demo,并封装了一个运动框架(实例代码)
Jul 22 Javascript
一秒学会微信小程序制作table表格
Feb 14 Javascript
JS实现简单tab选项卡切换
Oct 25 Javascript
bootstrap-table后端分页功能完整实例
Jun 01 Javascript
Vue中添加滚动事件设置的方法详解
Sep 14 Javascript
Node与Python 双向通信的实现代码
Jul 16 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 CURL模拟GET及POST函数代码
2010/04/25 PHP
php中去除所有js,html,css代码
2010/10/12 PHP
js代码实现微博导航栏
2015/07/30 PHP
七种PHP开发环境搭建工具
2020/06/28 PHP
一个javascript图片阅览组件
2010/11/09 Javascript
别了 JavaScript中的isXX系列
2012/08/01 Javascript
Jquery创建一个层当鼠标移动到层上面不消失效果
2013/12/12 Javascript
js实现分割上传大文件
2016/03/09 Javascript
jQuery选择器基础入门教程
2016/05/10 Javascript
基于jquery实现的鼠标悬停提示案例
2016/12/11 Javascript
Vue利用路由钩子token过期后跳转到登录页的实例
2017/10/26 Javascript
nodejs 使用 js 模块的方法实例详解
2018/12/04 NodeJs
js实现鼠标拖拽缩放div实例代码
2019/03/25 Javascript
vue 组件内获取actions的response方式
2019/11/08 Javascript
vue 检测用户上传图片宽高的方法
2020/02/06 Javascript
python获得两个数组交集、并集、差集的方法
2015/03/27 Python
使用Python脚本生成随机IP的简单方法
2015/07/30 Python
Python的地形三维可视化Matplotlib和gdal使用实例
2017/12/09 Python
1分钟快速生成用于网页内容提取的xslt
2018/02/23 Python
Python3使用pandas模块读写excel操作示例
2018/07/03 Python
python 函数内部修改外部变量的方法
2018/12/18 Python
python创建属于自己的单词词库 便于背单词
2019/07/30 Python
Scrapy框架基本命令与settings.py设置
2020/02/06 Python
pandas读取csv文件提示不存在的解决方法及原因分析
2020/04/21 Python
Python中socket网络通信是干嘛的
2020/05/27 Python
分享unittest单元测试框架中几种常用的用例加载方法
2020/12/02 Python
html5应用缓存_动力节点Java学院整理
2017/07/13 HTML / CSS
AT&T Wireless:手机、无限数据计划和配件
2018/06/03 全球购物
美国购买肉、鸭、家禽、鹅肝和熟食网站:D’Artagnan
2018/11/13 全球购物
工程造价管理专业大专生求职信
2013/10/06 职场文书
大学迎新晚会主持词
2014/03/24 职场文书
团队口号大全
2014/06/06 职场文书
会展策划与管理专业求职信
2014/06/09 职场文书
2016年秋季运动会通讯稿
2015/11/25 职场文书
深度好文:50条没人告诉你的人生经验,句句精辟
2019/08/22 职场文书
python Polars库的使用简介
2021/04/21 Python