微信小程序如何实现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实现可编辑表格并用AJAX提交到服务器修改数据
Dec 27 Javascript
js中的preventDefault与stopPropagation详解
Jan 29 Javascript
js使用for循环及if语句判断多个一样的name
Sep 09 Javascript
javascript实现table选中的行以指定颜色高亮显示的方法
May 13 Javascript
JQuery.dataTables表格插件添加跳转到指定页
Jun 09 jQuery
iscroll-probe实现下拉刷新和下拉加载效果
Jun 28 Javascript
深入理解JS的事件绑定、事件流模型
May 13 Javascript
利用Node.js如何实现文件循环覆写
Apr 05 Javascript
layui使用button按钮 点击出现弹层 弹层中加载表单的实例
Sep 04 Javascript
layui多iframe页面控制定时器运行的方法
Sep 05 Javascript
原生JS运动实现轮播图
Jan 02 Javascript
vue使用localStorage持久性存储实现评论列表
Apr 14 Vue.js
微信小程序仿淘宝热搜词在搜索框中轮播功能
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
基于mysql的论坛(5)
2006/10/09 PHP
php excel类 phpExcel使用方法介绍
2010/08/21 PHP
无法在发生错误时创建会话,请检查 PHP 或网站服务器日志,并正确配置 PHP 安装(win+linux)
2012/05/05 PHP
Ubuntu中搭建Nginx、PHP环境最简单的方法
2015/03/05 PHP
php判断输入是否是纯数字,英文,汉字的方法
2015/03/05 PHP
搭建Vim为自定义的PHP开发工具的一些技巧
2015/12/11 PHP
详解HTTP Cookie状态管理机制
2016/01/14 PHP
Smarty环境配置与使用入门教程
2016/05/11 PHP
laravel中的错误与日志用法详解
2016/07/26 PHP
jquery 常用操作整理 基础入门篇
2009/10/14 Javascript
LazyLoad 延迟加载(按需加载)
2010/05/31 Javascript
jQuery实现table隔行换色和鼠标经过变色的两种方法
2014/06/15 Javascript
基于jquery实现复选框全选,反选,全不选等功能
2015/10/16 Javascript
一些实用性较高的js方法
2016/04/19 Javascript
jQuery基础_入门必看知识点
2016/07/04 Javascript
运用js教你轻松制作html音乐播放器
2020/04/17 Javascript
JavaScript实现二分查找实例代码
2017/02/22 Javascript
Vue的Flux框架之Vuex状态管理器
2017/07/30 Javascript
jQuery实现简单的计时器功能实例分析
2017/08/29 jQuery
使用vue-cli+webpack搭建vue开发环境的方法
2017/12/22 Javascript
layui自定义插件citySelect实现省市区三级联动选择
2019/07/26 Javascript
浅谈bootstrap layer.open中end的使用方法
2019/09/12 Javascript
nodejs dgram模块广播+组播的实现示例
2019/11/04 NodeJs
Node.JS如何实现JWT原理
2020/09/18 Javascript
[01:43]3.19DOTA2发布会 三代刀塔人第三代
2014/03/25 DOTA
python迭代器的使用方法实例
2013/11/21 Python
opencv3/C++图像像素操作详解
2019/12/10 Python
python中复数的共轭复数知识点总结
2020/12/06 Python
日本高岛屋百货购物网站:TAKASHIMAYA
2019/03/24 全球购物
周年庆促销方案
2014/03/15 职场文书
领导班子整改方案和个人整改措施
2014/10/25 职场文书
学术研讨会欢迎词
2015/01/26 职场文书
《槐乡的孩子》教学反思
2016/02/20 职场文书
处世之道:关于真诚相待的名言推荐
2019/12/02 职场文书
Python+Appium自动化测试的实战
2021/06/30 Python
MySQL 开窗函数
2022/02/15 MySQL