微信小程序 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 相关文章推荐
js导航菜单(自写)简单大方
Mar 28 Javascript
通过url查找a元素应用案例
Apr 29 Javascript
Ajax中解析Json的两种方法对比分析
Jun 25 Javascript
Bootstrap精简教程
Nov 27 Javascript
jQuery 3.0 的变化及使用方法
Feb 01 Javascript
浅谈$('div a') 与$('div&gt;a')的区别
Jul 18 Javascript
jquery自动补齐功能插件flexselect用法示例
Aug 06 Javascript
AngularJS入门教程之AngularJS 模板
Aug 18 Javascript
使用vue构建一个上传图片表单
Jul 04 Javascript
javascript流程控制语句集合
Sep 18 Javascript
jQuery实现的别踩白块小游戏完整示例
Jan 07 jQuery
微信小程序按钮点击动画效果的实现
Sep 04 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 session劫持和防范的方法
2013/11/12 PHP
PHP实现支持SSL连接的SMTP邮件发送类
2015/03/05 PHP
PHP抓取淘宝商品的用户晒单评论+图片+搜索商品列表实例
2016/04/14 PHP
yii2带搜索功能的下拉框实例详解
2016/05/12 PHP
PHP实现对数组分页处理实例详解
2017/02/07 PHP
laravel中的一些简单实用功能
2018/11/03 PHP
jquery cookie插件代码类
2009/05/26 Javascript
利用onresize使得div可以随着屏幕大小而自适应的代码
2010/01/15 Javascript
javascript实现的使用方向键控制光标在table单元格中切换
2010/11/17 Javascript
asp.net刷新本页面的六种方法总结
2014/01/07 Javascript
jQuery中:nth-child选择器用法实例
2014/12/31 Javascript
JavaScript学习笔记之JS函数
2015/01/22 Javascript
原生JS和jQuery版实现文件上传功能
2016/04/18 Javascript
jQuery实现产品对比功能附源码下载
2016/08/09 Javascript
AngularJS 与Bootstrap实现表格分页实例代码
2016/10/14 Javascript
js阻止移动端页面滚动的两种方法
2017/01/25 Javascript
js仿微信抢红包功能
2020/09/25 Javascript
vue-router 路由基础的详解
2017/10/17 Javascript
vue-video-player 通过自定义按钮组件实现全屏切换效果【推荐】
2018/08/29 Javascript
vue轮播组件实现$children和$parent 附带好用的gif录制工具
2019/09/26 Javascript
vue实现井字棋游戏
2020/09/29 Javascript
vue实现一个获取按键展示快捷键效果的Input组件
2021/01/13 Vue.js
python解决Fedora解压zip时中文乱码的方法
2016/09/18 Python
Python编程之string相关操作实例详解
2017/07/22 Python
Pytorch 抽取vgg各层并进行定制化处理的方法
2019/08/20 Python
软件测试企业面试试卷
2016/07/13 面试题
工作证明格式及范本
2014/09/12 职场文书
机关作风建设工作总结
2014/10/23 职场文书
2014幼儿园保育员工作总结
2014/11/10 职场文书
2015年求职自荐信范文
2015/03/04 职场文书
高校自主招生校长推荐信
2015/03/23 职场文书
乡镇党建工作总结2015
2015/05/19 职场文书
敬业奉献模范事迹材料(2016精选版)
2016/02/26 职场文书
浅析InnoDB索引结构
2021/04/05 MySQL
MySQL 可扩展设计的基本原则
2021/05/14 MySQL
Mysql将字符串按照指定字符分割的正确方法
2022/05/30 MySQL