微信小程序单选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 autocomplete自动完成插件的的使用方法
Aug 07 Javascript
iframe如何动态创建及释放其所占内存
Sep 03 Javascript
浅析javascript中的事件代理
Nov 06 Javascript
Webpack 实现 AngularJS 的延迟加载
Mar 02 Javascript
基于javascript html5实现多文件上传
Mar 03 Javascript
AngularJS基础 ng-keypress 指令简单示例
Aug 02 Javascript
详解vue.js的事件处理器v-on:click
Jun 27 Javascript
node.js express中app.param的用法详解
Jul 16 Javascript
javascript变量提升和闭包理解
Mar 12 Javascript
详解vue2.0 资源文件assets和static的区别
Nov 27 Javascript
小程序实现长按保存图片的方法
Dec 31 Javascript
JavaScript数组类型Array相关的属性与方法详解
Sep 08 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
冰滴咖啡制作步骤
2021/03/03 冲泡冲煮
php中转义mysql语句的实现代码
2011/06/24 PHP
php判断正常访问和外部访问的示例
2014/02/10 PHP
完美解决thinkphp验证码出错无法显示的方法
2014/12/09 PHP
PHP编写daemon process 实例详解
2016/11/13 PHP
PHP根据key删除数组中指定的元素
2019/02/28 PHP
分享精心挑选的23款美轮美奂的jQuery 图片特效插件
2012/08/14 Javascript
jquery实现div拖拽宽度示例代码
2013/07/31 Javascript
javascript事件函数中获得事件源的两种不错方法
2014/03/17 Javascript
JavaScript动态添加列的方法
2015/03/25 Javascript
基于jquery实现页面滚动到底自动加载数据的功能
2015/12/19 Javascript
基于Bootstrap+jQuery.validate实现表单验证
2016/05/30 Javascript
详解nodejs中exports和module.exports的区别
2017/02/17 NodeJs
js鼠标移动时禁止选中文字
2017/02/19 Javascript
jQuery+SpringMVC中的复选框选择与传值实例
2018/01/08 jQuery
实例详解vue.js浅度监听和深度监听及watch用法
2018/08/16 Javascript
解决vue2.0 element-ui中el-upload的before-upload方法返回false时submit()不生效问题
2018/08/24 Javascript
举例讲解Python设计模式编程的代理模式与抽象工厂模式
2016/01/16 Python
使用Django Form解决表单数据无法动态刷新的两种方法
2017/07/14 Python
django 发送手机验证码的示例代码
2018/04/25 Python
解决python中遇到字典里key值为None的情况,取不出来的问题
2018/10/17 Python
python实现按行分割文件
2019/07/22 Python
Python Django Vue 项目创建过程详解
2019/07/29 Python
解决pytorch DataLoader num_workers出现的问题
2020/01/14 Python
python logging 日志的级别调整方式
2020/02/21 Python
Python代码执行时间测量模块timeit用法解析
2020/07/01 Python
用Python实现职工信息管理系统
2020/12/30 Python
杭州SQL浙江浙大网新恩普软件有限公司
2013/07/27 面试题
大学生个人简历自我评价
2013/11/16 职场文书
档案检查欢迎词
2014/01/13 职场文书
新春联欢会主持词
2014/03/24 职场文书
汽车服务工程专业自荐信
2014/09/02 职场文书
先进班组事迹材料
2014/12/25 职场文书
2015年大学迎新工作总结
2015/07/16 职场文书
新闻通讯稿模板
2015/07/22 职场文书
Python 装饰器(decorator)常用的创建方式及解析
2022/04/24 Python