微信小程序 radio单选框组件详解及实例代码


Posted in Javascript onJanuary 10, 2017

微信小程序单选框radio

 相关文章:

微信小程序 Button

微信小程序 radio

微信小程序 slider

微信小程序 switch

微信小程序 textarea

微信小程序 picker-view

微信小程序 picker

微信小程序 label

微信小程序 input 

微信小程序 form

微信小程序 checkbox

实现效果图:

微信小程序 radio单选框组件详解及实例代码

 radio-group

单选群组,内部由多个radio组成

属性名 类型 默认值 说明
bindchange EventHandle   radio-group中的选中项发生变化时触发change事件,event.detai = {value : 选中项radio的value

radio


​ 单选项目

属性名 类型 默认值 说明
value String   radio标识。当该radio选中时,radio-group的change事件会携带radio的value
checked Boolean false 当前是否选中
disabled Boolean false 是否禁用

示例代码

<radio-group class="radio-group" bindchange="radioChange">
 <label class="radio" wx:for-items="{{items}}">
 <radio value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}}
 </label>
</radio-group>
Page({
 data: {
 items: [
 {name: 'USA', value: '美国'},
 {name: 'CHN', value: '中国', checked: 'true'},
 {name: 'BRA', value: '巴西'},
 {name: 'JPN', value: '日本'},
 {name: 'ENG', value: '英国'},
 {name: 'TUR', value: '法国'},
 ]
 },
 radioChange: function(e) {
 console.log('radio发生change事件,携带value值为:', e.detail.value)
 }
})
感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
Javascript 相关文章推荐
10个基于Jquery的幻灯片插件教程
Oct 29 Javascript
深入理解JavaScript 闭包究竟是什么
Apr 12 Javascript
jQuery 无刷新分页实例代码
Nov 12 Javascript
利用js动态添加删除table行的示例代码
Dec 16 Javascript
JQuery插件fancybox无法在弹出层使用左右键的解决办法
Dec 25 Javascript
JavaScript中的apply和call函数详解
Jul 20 Javascript
深入理解js generator数据类型
Aug 16 Javascript
JS调用打印机功能简单示例
Nov 28 Javascript
Bootstrap table表格初始化表格数据的方法
Jul 25 Javascript
angular.js实现列表orderby排序的方法
Oct 02 Javascript
js取小数点后两位四种方法
Jan 18 Javascript
js实现炫酷光感效果
Sep 05 Javascript
微信小程序 slider 详解及实例代码
Jan 10 #Javascript
微信小程序 switch组件详解及简单实例
Jan 10 #Javascript
微信小程序 textarea 组件详解及简单实例
Jan 10 #Javascript
微信小程序 picker-view 组件详解及简单实例
Jan 10 #Javascript
微信小程序 picker 组件详解及简单实例
Jan 10 #Javascript
微信小程序 label 组件详解及简单实例
Jan 10 #Javascript
实现一个简单的vue无限加载指令方法
Jan 10 #Javascript
You might like
php socket方式提交的post详解
2008/07/19 PHP
PHP修改session_id示例代码
2014/01/08 PHP
PHP入门教程之操作符与控制结构流程详解
2016/09/09 PHP
PHP 接入微信扫码支付总结(总结篇)
2016/11/03 PHP
php in_array() 检查数组中是否存在某个值详解
2016/11/23 PHP
JavaScript Undefined,Null类型和NaN值区别
2008/10/22 Javascript
自己的js工具 Event封装
2009/08/21 Javascript
JavaScript 精粹读书笔记(1,2)
2010/02/07 Javascript
createElement与createDocumentFragment的点点区别小结
2011/12/19 Javascript
jquery判断浏览器类型的代码
2012/11/05 Javascript
处理及遍历XML文档DOM元素属性及方法整理
2013/08/23 Javascript
confirm的用法示例用于按钮操作时确定是否执行
2014/06/19 Javascript
nodejs中转换URL字符串与查询字符串详解
2014/11/26 NodeJs
Bootstrap的图片轮播示例代码
2015/08/31 Javascript
AngularJS 路由详解和简单实例
2016/07/28 Javascript
使用JS实现图片展示瀑布流效果(简单实例)
2016/09/06 Javascript
JavaScript常见的五种数组去重的方式
2016/12/15 Javascript
原生JS仿QQ阅读点击展开、收起效果
2017/03/08 Javascript
加快Vue项目的开发速度的方法
2018/12/12 Javascript
JavaScript的console命令使用实例
2019/12/03 Javascript
python使用循环实现批量创建文件夹示例
2014/03/25 Python
python简单的函数定义和用法实例
2015/05/07 Python
python 将有序数组转换为二叉树的方法
2019/03/26 Python
用python生成(动态彩色)二维码的方法(使用myqr库实现)
2019/06/24 Python
Python3操作Excel文件(读写)的简单实例
2019/09/02 Python
Python时间差中seconds和total_seconds的区别详解
2019/12/26 Python
OpenCV 使用imread()函数读取图片的六种正确姿势
2020/07/09 Python
Python 测试框架unittest和pytest的优劣
2020/09/26 Python
教你如何用python操作摄像头以及对视频流的处理
2020/10/12 Python
python 检测nginx服务邮件报警的脚本
2020/12/31 Python
华丽的手绘陶瓷:MacKenzie-Childs
2017/02/04 全球购物
Bose法国官网:购买耳机、扬声器、家庭影院、专业音响
2017/12/21 全球购物
英国最大的独立摄影零售商:Park Cameras
2019/11/27 全球购物
一组SQL面试题
2016/02/15 面试题
2015年度优秀员工获奖感言
2015/07/31 职场文书
李清照的诗词赏析(20首)
2019/08/22 职场文书