微信小程序单选radio及多选checkbox按钮用法示例


Posted in Javascript onApril 30, 2019

本文实例讲述了微信小程序单选radio及多选checkbox按钮用法。分享给大家供大家参考,具体如下:

1.单选:radio

实例:

js:

Page({
data : {
radioId:"",
loves:[
{id:1, name:"跑步" ,checked : 'true'},
{id:2, name:"篮球" },
{id:3, name:"足球" },
]
},
updataRadio:function(e){
var Id=e.value.id
this.setData({
radioId:Id
})
},
})

wxml:

<radio-group class="radio" bindChange="updataRadio">
<view wx:for="{{loves}}">
<radio value="{{item.id}}" checked="{{item.checked}}">{{item.name}}</radio>
</view>
</radio-group>

2.多选:CheckBox

实例:

js:

Page({
data : {
radioId:[],
loves:[
{id:1, name:"跑步" ,checked : 'true'},
{id:2, name:"篮球" },
{id:3, name:"足球" },
]
},
updataRadio:function(e){
var Id=e.value.id
this.setData({
radioId:Id
})
},
})

wxml:

<checkbox-group class="checkbox" bindChange="updataRadio">
<view wx:for="{{loves}}">
<chechbox value="{{item.id}}" checked="{{item.checked}}">{{item.name}}</chechbox>
</view>
</checkbox-group>

附:多选获得的值是一个数组,单选获得的值是一个单值

希望本文所述对大家微信小程序开发有所帮助。

Javascript 相关文章推荐
jquery checkbox全选、取消全选实现代码
Mar 05 Javascript
javascript alert乱码的解决方法
Nov 05 Javascript
采用call方式实现js继承
May 20 Javascript
JavaScript的9种继承实现方式归纳
May 18 Javascript
Javascript实现的SHA-256加密算法完整实例
Feb 02 Javascript
angularjs+bootstrap实现自定义分页的实例代码
Jun 19 Javascript
BootStrap Table前台和后台分页对JSON格式的要求
Jun 28 Javascript
React操作真实DOM实现动态吸底部的示例
Oct 23 Javascript
在js代码拼接dom对象到页面上的模板总结
Oct 21 Javascript
JQuery中的常用事件、对象属性与使用方法分析
Dec 23 jQuery
vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多(步骤详解)
Jan 14 Javascript
JS如何调用WebAssembly编译出来的.wasm文件
Nov 05 Javascript
VSCode使用之Vue工程配置eslint
Apr 30 #Javascript
微信小程序API—获取定位的详解
Apr 30 #Javascript
基于JS开发微信网页录音功能的实例代码
Apr 30 #Javascript
vue前端框架—Mint UI详解(更适用于移动端)
Apr 30 #Javascript
详解Vue+ElementUI从零开始搭建自己的网站(一、环境搭建)
Apr 30 #Javascript
详解微信小程序用定时器实现倒计时效果
Apr 30 #Javascript
TypeScript开发Node.js程序的方法
Apr 30 #Javascript
You might like
解析php中两种缩放图片的函数,为图片添加水印
2013/06/14 PHP
php数组转换js数组操作及json_encode的用法详解
2013/10/26 PHP
PHP使用ODBC连接数据库的方法
2015/07/18 PHP
PHP基于自增数据如何生成不重复的随机数示例
2017/05/19 PHP
PHP中将一个字符串部分字符用星号*替代隐藏的实现代码
2019/09/08 PHP
CL vs ForZe BO5 第四场 2.13
2021/03/10 DOTA
JavaScript delete 属性的使用
2009/10/08 Javascript
javascript cookies 设置、读取、删除实例代码
2010/04/12 Javascript
从QQ网站中提取的纯JS省市区三级联动菜单
2013/12/25 Javascript
Javascript实现的常用算法(如冒泡、快速、鸽巢、奇偶等)
2014/04/29 Javascript
javascript if条件判断方法小结
2014/05/17 Javascript
Javascript实现禁止输入中文或英文的例子
2014/12/09 Javascript
7个有用的jQuery代码片段分享
2015/05/19 Javascript
jQuery控制div实现随滚动条滚动效果
2016/06/07 Javascript
bootstrapValidator表单验证插件学习
2016/12/30 Javascript
react-router4 嵌套路由的使用方法
2017/07/24 Javascript
基于Vue实现的多条件筛选功能的详解(类似京东和淘宝功能)
2019/05/07 Javascript
javascript将扁平的数据转为树形结构的高效率算法
2020/02/27 Javascript
vue.js实现点击图标放大离开时缩小的代码
2021/01/27 Vue.js
python使用cookie库操保存cookie详解
2014/03/03 Python
简单说明Python中的装饰器的用法
2015/04/24 Python
Python的Tornado框架异步编程入门实例
2015/04/24 Python
Python如何实现守护进程的方法示例
2017/02/08 Python
python获取指定字符串中重复模式最高的字符串方法
2018/06/29 Python
python实现kmp算法的实例代码
2019/04/03 Python
使用python os模块复制文件到指定文件夹的方法
2019/08/22 Python
python rsa实现数据加密和解密、签名加密和验签功能
2019/09/18 Python
浅谈matplotlib 绘制梯度下降求解过程
2020/07/12 Python
德国自然时尚和有机产品购物网站:Waschbär
2019/05/29 全球购物
Ibatis的核心配置文件都有什么
2014/09/08 面试题
高三政治教学反思
2014/02/06 职场文书
甲乙双方合作协议书
2014/10/13 职场文书
Python基础之Socket通信原理
2021/04/22 Python
QT与javascript交互数据的实现
2021/05/26 Javascript
项目中Nginx多级代理是如何获取客户端的真实IP地址
2022/05/30 Servers
Python使用Beautiful Soup(BS4)库解析HTML和XML
2022/06/05 Python