微信小程序 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 相关文章推荐
javascript之通用简单的table选项卡实现(二)
May 09 Javascript
js对数字的格式化使用说明
Jan 12 Javascript
自己做的模拟模态对话框实现代码
May 23 Javascript
jQuery中is()方法用法实例
Jan 06 Javascript
轻松学习jQuery插件EasyUI EasyUI实现树形网络基本操作(2)
Nov 30 Javascript
angular select 默认值设置方法
Jun 23 Javascript
vue.js实现备忘录功能的方法
Jul 10 Javascript
对 Vue-Router 进行单元测试的方法
Nov 05 Javascript
微信小程序自定义toast弹窗效果的实现代码
Nov 15 Javascript
Vue+Element-U实现分页显示效果
Nov 15 Javascript
react-native 实现购物车滑动删除效果的示例代码
Jan 15 Javascript
适合后台管理系统开发的12个前端框架(小结)
Jun 29 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入门学习知识点六 PHP文件的读写操作代码
2011/07/14 PHP
Youku 视频绝对地址获取的方法详解
2013/06/26 PHP
php缓冲 output_buffering和ob_start使用介绍
2014/01/30 PHP
ThinkPHP中ajax使用实例教程
2014/08/22 PHP
php验证码生成代码
2015/11/11 PHP
PHP5.5基于mysqli连接MySQL数据库和读取数据操作实例详解
2019/02/16 PHP
JavaScript中数组的排序、乱序和搜索实现代码
2011/11/30 Javascript
IE的有条件注释判定IE版本详解(附实例代码)
2012/01/04 Javascript
THREE.JS入门教程(4)创建粒子系统
2013/01/24 Javascript
JS实现淘宝幻灯片效果的实现方法
2013/03/22 Javascript
获得Javascript对象属性个数的示例代码
2013/11/21 Javascript
js点击button按钮跳转到另一个新页面
2014/10/10 Javascript
jQuery EasyUI 菜单与按钮之创建简单的菜单和链接按钮
2015/11/18 Javascript
javascript中闭包(Closure)详解
2016/01/06 Javascript
详解Javascript中的Object对象
2016/02/28 Javascript
react高阶组件经典应用之权限控制详解
2017/09/07 Javascript
swiper插件自定义切换箭头按钮
2017/12/28 Javascript
详解组件库的webpack构建速度优化
2018/06/18 Javascript
JavaScript基于对象方法实现数组去重及排序操作示例
2018/07/10 Javascript
移动端滑动切换组件封装 vue-swiper-router实例详解
2018/11/25 Javascript
图片文字识别(OCR)插件Ocrad.js教程
2018/11/26 Javascript
vant 中van-list的用法说明
2020/11/11 Javascript
Python自动重试HTTP连接装饰器
2015/04/28 Python
python返回昨天日期的方法
2015/05/13 Python
Python装饰器语法糖
2019/01/02 Python
Python如何调用外部系统命令
2019/08/07 Python
selenium WebDriverWait类等待机制的实现
2020/03/18 Python
Python实现网络聊天室的示例代码(支持多人聊天与私聊)
2021/01/27 Python
CSS3实现多重边框的方法总结
2016/05/31 HTML / CSS
意大利网上书店:LaFeltrinelli
2020/06/12 全球购物
AJAX的优缺点都有什么
2015/08/18 面试题
Ruby如何创建一个线程
2013/03/10 面试题
党员干部四风问题整改措施思想汇报
2014/10/12 职场文书
环卫工作汇报材料
2014/10/28 职场文书
六一儿童节主持开场白
2015/05/28 职场文书
Java获取e.printStackTrace()打印的信息方式
2021/08/07 Java/Android