微信小程序如何实现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提交中文乱码的解决方案
Jul 02 Javascript
parentElement,srcElement的使用小结
Jan 13 Javascript
js中的getAttribute方法使用示例
Aug 01 Javascript
JS动态修改表格cellPadding和cellSpacing的方法
Mar 31 Javascript
Windows系统下安装Node.js的步骤图文详解
Nov 15 Javascript
jquery实现页面加载效果
Feb 21 Javascript
详解Angular2 关于*ngFor 嵌套循环
May 22 Javascript
jQuery Layer弹出层传值到父页面的实现代码
Aug 17 jQuery
微信小程序的部署方法步骤
Sep 04 Javascript
Layui 带多选框表格监听事件以及按钮自动点击写法实例
Sep 02 Javascript
vue+elementUI动态增加表单项并添加验证的代码详解
Dec 17 Vue.js
vue实现简单数据双向绑定
Apr 28 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
PHP file_get_contents设置超时处理方法
2013/09/30 PHP
smarty模板引擎中内建函数if、elseif和else的使用方法
2015/01/22 PHP
php实现登陆模块功能示例
2016/10/20 PHP
thinkPHP引入类的方法详解
2016/12/08 PHP
PHP回调函数简单用法示例
2019/05/08 PHP
Laravel 5.1 框架Blade模板引擎用法实例分析
2020/01/04 PHP
由prototype_1.3.1进入javascript殿堂-类的初探
2006/11/06 Javascript
ASP.NET jQuery 实例11 通过使用jQuery validation插件简单实现用户登录页面验证功能
2012/02/03 Javascript
jQuery筛选器children()案例详解(图文)
2013/02/17 Javascript
jquery实现的Banner广告收缩效果代码
2015/09/02 Javascript
JavaScript中rem布局在react中的应用
2015/12/09 Javascript
关于Javascript中defer和async的区别总结
2016/09/20 Javascript
jQuery中ztree 点击文本框弹出下拉框的实例代码
2017/02/05 Javascript
jquery中有哪些api jQuery主要API
2017/11/20 jQuery
AngularJs点击状态值改变背景色的实例
2017/12/18 Javascript
vue-router+nginx 非根路径配置方法
2018/06/30 Javascript
node+express框架中连接使用mysql(经验总结)
2018/11/10 Javascript
如何手动实现es5中的bind方法详解
2018/12/07 Javascript
[01:28]2014DOTA2国际邀请赛中国区预选赛四大豪门直升机抵达会场
2014/05/24 DOTA
python实现的登录和操作开心网脚本分享
2014/07/09 Python
深入理解Python中字典的键的使用
2015/08/19 Python
python用pickle模块实现“增删改查”的简易功能
2017/06/07 Python
python构建深度神经网络(DNN)
2018/03/10 Python
Python处理CSV与List的转换方法
2018/04/19 Python
tensorflow实现逻辑回归模型
2018/09/08 Python
在Python中实现替换字符串中的子串的示例
2018/10/31 Python
python pandas库的安装和创建
2019/01/10 Python
python matplotlib饼状图参数及用法解析
2019/11/04 Python
一款纯css3实现的鼠标悬停动画按钮
2014/12/29 HTML / CSS
英国鹦鹉店:Parrot Essentials
2018/12/03 全球购物
英国设计的甲板鞋和船鞋:Chatham
2018/12/06 全球购物
十一个高级MySql面试题
2014/10/06 面试题
计算机专业毕业生自我鉴定
2014/01/16 职场文书
模具专业自荐信
2014/05/29 职场文书
党的群众路线教育实践活动对照检查材料思想汇报
2014/09/19 职场文书
pd.drop_duplicates删除重复行的方法实现
2022/06/16 Python