微信小程序 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 相关文章推荐
jQuery多条件筛选如何实现
Nov 04 Javascript
基于jquery实现省市区三级联动效果
Dec 25 Javascript
jQuery Easyui使用(一)之可折叠面板的布局手风琴菜单
Aug 17 Javascript
浅谈jQuery效果函数
Sep 16 Javascript
微信小程序 action-sheet底部菜单详解
Oct 27 Javascript
详解vue.js组件化开发实践
Dec 14 Javascript
详解从新建vue项目到引入组件Element的方法
Aug 29 Javascript
jsTree事件和交互以及插件plugins详解
Aug 29 Javascript
antd组件Upload实现自己上传的实现示例
Dec 18 Javascript
CKeditor4 字体颜色功能配置方法教程
Jun 26 Javascript
vue如何使用外部特殊字体的操作
Jul 30 Javascript
Vue3配置axios跨域实现过程解析
Nov 25 Vue.js
微信小程序 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聊天室技术
2006/10/09 PHP
PHP 图像尺寸调整代码
2010/05/26 PHP
php知道与问问的采集插件代码
2010/10/12 PHP
PHP实现数组递归转义的方法
2014/08/28 PHP
PHP判断一个字符串是否是回文字符串的方法
2015/03/23 PHP
php mysqli查询语句返回值类型实例分析
2016/06/29 PHP
thinkPHP商城公告功能开发问题分析
2016/12/01 PHP
php中文乱码问题的终极解决方案汇总
2017/08/01 PHP
Yii框架响应组件用法实例分析
2019/09/04 PHP
Javascript 类、命名空间、代码组织代码
2011/07/31 Javascript
js的toUpperCase方法用法实例
2015/01/27 Javascript
JSON字符串转JSON对象
2015/07/31 Javascript
JavaScript与HTML的结合方法详解
2015/11/23 Javascript
用JavaScript获取页面文档内容的实现代码
2016/06/10 Javascript
浅谈js里面的InttoStr和StrtoInt
2016/06/14 Javascript
JS实现动态增加和删除li标签行的实例代码
2016/10/16 Javascript
JS短信验证码倒计时功能的实现(没有验证码,只有倒计时)
2016/10/27 Javascript
jquery.Jcrop结合JAVA后台实现图片裁剪上传实例
2016/11/05 Javascript
微信小程序仿抖音视频之整屏上下切换功能的实现代码
2020/05/24 Javascript
Vue+ElementUI 中级联选择器Bug问题的解决
2020/07/31 Javascript
js实现限定范围拖拽的示例
2020/10/26 Javascript
[03:09]DOTA2亚洲邀请赛 LGD战队出场宣传片
2015/02/07 DOTA
Python程序中用csv模块来操作csv文件的基本使用教程
2016/03/03 Python
python 3.0 模拟用户登录功能并实现三次错误锁定
2017/11/01 Python
Sanic框架蓝图用法实例分析
2018/07/17 Python
使用Python进行目录的对比方法
2018/11/01 Python
python实现字符串完美拆分split()的方法
2019/07/16 Python
浅析Python 引号、注释、字符串
2019/07/25 Python
Pycharm创建项目时如何自动添加头部信息
2019/11/14 Python
关于Tensorflow使用CPU报错的解决方式
2020/02/05 Python
python+selenium+chromedriver实现爬虫示例代码
2020/04/10 Python
PyQt中使用QtSql连接MySql数据库的方法
2020/07/28 Python
意大利买卖二手奢侈品网站:LAMPOO
2020/06/03 全球购物
优良学风班总结材料
2014/02/08 职场文书
4S店售后客服自我评价
2014/04/09 职场文书
婚假请假条格式及范文
2014/04/10 职场文书