微信小程序单选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 相关文章推荐
网页的标准,IMG不支持onload标签怎么办
Jun 29 Javascript
jQuery EasyUI API 中文文档 - Draggable 可拖拽
Sep 29 Javascript
JS trim去空格的最佳实践
Oct 30 Javascript
javascript中var的重要性分析
Feb 11 Javascript
VUE JS 使用组件实现双向绑定的示例代码
Jan 10 Javascript
Vue实例简单方法介绍
Jan 20 Javascript
jquery获取select,option所有的value和text的实例
Mar 06 Javascript
Vue.js基础学习之class与样式绑定
Mar 20 Javascript
Javascript获取某个月的天数
May 30 Javascript
vue实现在线翻译功能
Sep 27 Javascript
微信小程序实现限制用户转发功能的实例代码
Feb 22 Javascript
解决vue项目router切换太慢问题
Jul 19 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
动态新闻发布的实现及其技巧
2006/10/09 PHP
smarty的保留变量问题
2008/10/23 PHP
遍历指定目录下的所有目录和文件的php代码
2011/11/27 PHP
PHP-Fcgi下PHP的执行时间设置方法
2013/08/02 PHP
动态表单验证的操作方法和TP框架里面的ajax表单验证
2017/07/19 PHP
PHP实现腾讯与百度坐标转换
2017/08/05 PHP
php json转换相关知识(小结)
2018/12/21 PHP
PHP asXML()函数讲解
2019/02/03 PHP
jQuery 操作下拉列表框实现代码
2010/02/22 Javascript
IE下写xml文件的两种方式(fso/saveAs)
2013/08/05 Javascript
浅谈轻量级js模板引擎simplite
2015/02/13 Javascript
JS+CSS实现的竖向简洁折叠菜单效果代码
2015/10/22 Javascript
跟我学习javascript的函数和函数表达式
2015/11/16 Javascript
浅谈React 属性和状态的一些总结
2016/11/21 Javascript
vue-axios使用详解
2017/05/10 Javascript
前端跨域的几种解决方式总结(推荐)
2017/08/16 Javascript
vue better-scroll插件使用详解
2018/01/25 Javascript
Vue中的字符串模板的使用
2018/05/17 Javascript
浅析vue-router原理
2018/10/19 Javascript
python进阶教程之动态类型详解
2014/08/30 Python
Python实现自动登录百度空间的方法
2017/06/10 Python
Python中的TCP socket写法示例
2018/05/11 Python
Python根据欧拉角求旋转矩阵的实例
2019/01/28 Python
Python面向对象实现方法总结
2020/08/12 Python
详解numpy.ndarray.reshape()函数的参数问题
2020/10/13 Python
荷兰睡眠专家:Beter Bed
2020/11/23 全球购物
Ibatis如何使用动态表名
2015/07/12 面试题
双十佳事迹材料
2014/01/29 职场文书
《我不是最弱小的》教学反思
2014/02/23 职场文书
党员对照检查剖析材料
2014/10/13 职场文书
商务司机岗位职责
2015/04/10 职场文书
讲文明倡议书
2015/04/29 职场文书
新郎婚礼致辞
2015/07/27 职场文书
CSS 新特性 contain控制页面的重绘与重排问题
2021/04/30 HTML / CSS
win11无法登录onedrive错误代码0x8004def7怎么办 ?
2022/04/05 数码科技
Python OpenCV形态学运算示例详解
2022/04/07 Python