微信小程序学习(11)-checkbox控件和label标签
来源:互联网 发布:网络创业课理论与实践 编辑:程序博客网 时间:2024/06/05 08:11
checkbox控件
复选框控件,实现多重选择功能。通过checkbox-group标签,包裹所以checkbox标签来实现,中间可以嵌入其他控件。
1.控件属性
注意:disabled不是不能选中,是禁止交互,如果一个checkbox的checked设置为true,disabled设置为true,该项也会被选中,只是不能进行点击交互。
2.代码实现
2.1> wxml文件的代码
<checkbox-group bindchange="checkboxChange"> <!--中间嵌入了text和button控件--> <text>中间可以嵌入其他控件</text> <button size="default" type="primary">这是嵌入的button控件</button> <!--checkbox-group标签包裹多个checkbox标签,数据通过.js中的变量获取--> <label class="checkbox" wx:for="{{items}}"> <checkbox value="{{item.name}}" checked="{{item.checked}}" disabled="{{item.disabled}}"/>{{item.value}} </label></checkbox-group>
2.2> .js控制层的代码
Page({ data: { items: [ {name: 'USA', value: '美国'}, //checked为truetrue,所以该项默认选中 {name: 'CHN', value: '中国', checked: 'true'}, {name: 'BRA', value: '巴西'}, // disabled为truetrue,所以该项不能被点击,checked为truetrue,默认选中,但是不能点击 {name: 'JPN', value: '日本',disabled:'true', checked: 'true'}, {name: 'ENG', value: '英国'}, {name: 'TUR', value: '法国'}, ] }, // checkbox点击的时候会执行这个方法 checkboxChange: function(e) { console.log('checkbox发生change事件,携带value值为:', e.detail.value) }})
3.label标签
label标签与html中的标签作用完全一样,把checkbox上显示的每个选项的内容与选择框进行绑定,实现点击文字也能选中该项目
4.整体效果
0 0
- 微信小程序学习(11)-checkbox控件和label标签
- 文本服务器控件(标签Label控件和文本框(TextBox)控件)
- FreeBASIC学习笔记——FireFly常用控件值按钮(Button)和标签(Label)
- 使用label标签,修改checkbox默认样式
- 绘制透明标签控件(Label)
- Cocos2dx 基本标签控件-Label
- input和label标签
- 标签控件Label(文本类控件)
- <学习html>第六天笔记-表单标签(input控件、label标签)
- 【Unity 3D】学习笔记一:Label控件(标签控件)
- Razor 标签语法(1-11) Label,Text,Hidden,Password,Radio,CheckBox,DropdownList,Href,Img,Css,JS
- 微信小程序label控件,你们真的会用吗?
- radio和checkbox中使用 label
- asp.net--label标签和html--label标签
- C#学习笔记:设置label(标签)控件的背景颜色为透明
- Android控件CheckBox学习
- label模拟radio、checkbox,自定义radio和checkbox
- 关于label标签与表单控件的显式联系和隐式联系
- Fresco 与 android-support-V4 冲突问题解决方案
- 看到的一篇介绍strncpy()函数比较好的文章
- 高效检索
- Unity内置6种着色器
- iOS10全新推送功能的实现
- 微信小程序学习(11)-checkbox控件和label标签
- 通俗易懂地解释卷积
- 浅谈协方差矩阵
- 第二次月赛总结(11.27)
- BYTE WORD DWORD详解
- 存储协议,你知道多少?
- H5 的复制操作
- 剑指Offer——记中国银行体检之旅
- Book4-Unit3