微信小程序单选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 相关文章推荐
jBox 2.3基于jquery的最新多功能对话框插件 常见使用问题解答
Nov 10 Javascript
DOM基础教程之使用DOM设置文本框
Jan 20 Javascript
jquery中ajax使用error调试错误的方法
Feb 08 Javascript
jQuery经过一段时间自动隐藏指定元素的方法
Mar 17 Javascript
JS实现随机乱撞彩色圆球特效的方法
May 05 Javascript
巧方法 JavaScript获取超链接的绝对URL地址
Jun 14 Javascript
jquery动态遍历Json对象的属性和值的方法
Jul 27 Javascript
jquery submit()不能提交表单的解决方法
Apr 24 jQuery
浅谈vue方法内的方法使用this的问题
Sep 15 Javascript
Vue.Draggable拖拽功能的配置使用方法
Jul 29 Javascript
Vue 实现从小到大的横向滑动效果详解
Oct 16 Javascript
JavaScript阻止事件冒泡的方法
Dec 06 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
一个oracle+PHP的查询的例子
2006/10/09 PHP
一键删除顽固的空文件夹 软件下载
2007/01/26 PHP
PHP中集成PayPal标准支付的实现方法分享
2012/02/06 PHP
php安全之直接用$获取值而不$_GET 字符转义
2012/06/03 PHP
Destoon实现多表查询示例
2014/08/21 PHP
PHP实现加强版加密解密类实例
2015/07/29 PHP
thinkphp修改配置进入默认首页的方法
2017/02/07 PHP
JS onmousemove鼠标移动坐标接龙DIV效果实例
2013/12/16 Javascript
利用jQuery解析获取JSON数据
2017/04/08 jQuery
详谈AngularJs 控制器、数据绑定、作用域
2017/07/09 Javascript
浅谈webpack组织模块的原理
2018/03/10 Javascript
实例讲解Vue.js中router传参
2018/04/22 Javascript
JavaScript解决浮点数计算不准确问题的方法分析
2018/07/09 Javascript
react-native 实现购物车滑动删除效果的示例代码
2021/01/15 Javascript
js实现随机点名
2021/01/19 Javascript
Python返回真假值(True or False)小技巧
2015/04/10 Python
python的mysqldb安装步骤详解
2017/08/14 Python
简单了解Python中的几种函数
2017/11/03 Python
Python使用pickle模块存储数据报错解决示例代码
2018/01/26 Python
PyQt5 QTable插入图片并动态更新的实例
2019/06/18 Python
python+tifffile之tiff文件读写方式
2020/01/13 Python
常用python爬虫库介绍与简要说明
2020/01/25 Python
Django CSRF认证的几种解决方案
2020/03/03 Python
python操作ini类型配置文件的实例教程
2020/10/30 Python
Python tkinter之Bind(绑定事件)的使用示例
2021/02/05 Python
浅谈HTML5新增和废弃的标签
2019/04/28 HTML / CSS
html5利用canvas实现颜色容差抠图功能
2019/12/23 HTML / CSS
马德里著名的运动鞋商店:NOIRFONCE
2019/04/12 全球购物
高中生自我评价个人范文
2013/11/09 职场文书
服装促销活动方案
2014/02/23 职场文书
教师敬业奉献模范事迹材料
2014/05/18 职场文书
党支部班子“四风”问题自我剖析材料
2014/09/28 职场文书
2015大学生实训报告
2014/11/05 职场文书
导师工作推荐信
2015/03/27 职场文书
经营场所使用证明
2015/06/19 职场文书
SpringBoot详解自定义Stater的应用
2022/07/15 Java/Android