微信小程序学习(11)-checkbox控件和label标签
2016-11-29 09:45
363 查看
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.整体效果
相关文章推荐
- <学习html>第六天笔记-表单标签(input控件、label标签)
- 微信小程序学习笔记(十)checkbox
- FreeBASIC学习笔记——FireFly常用控件值按钮(Button)和标签(Label)
- 3、微信小程序学习:加减控件
- 微信小程序学习(八)之checkbox组件
- EA&UML日拱一卒-0基础学习微信小程序(11)-ECMAScript3数组操作方法
- 1、微信小程序学习:基本控件的使用
- Razor 标签语法(1-11) Label,Text,Hidden,Password,Radio,CheckBox,DropdownList,Href,Img,Css,JS
- C#学习笔记:设置label(标签)控件的背景颜色为透明
- Flex中如何在Tree控件中指定一个自定义的label函数使其返回的标签名字为叶项目的名称的例子
- Flex中如何设置CheckBox标签(Label)与主题(theme )颜色的例子
- Silverlight Telerik控件学习:带CheckBox复选框的树形TreeView控件
- JSP标签处理程序学习小结——简单标签
- 【android基础学习之四】——基础控件CheckBox,Spinner,AutoCompleteTextView,DatePicker,TimePicker
- ASP.NET学习系列(四)开始控件之旅之Literal和Label
- 黑马程序员_学习日记9_ASP.NET服务器处理过程_一般处理程序_复习HTML标签
- VS 2010 测试功能学习(20) - 建立手工测试用例参数和被测试程序控件的绑定(转)
- .NET中如何将LABEL(标签控件)背景设为透明
- UNIX网络编程学习(11)--分析TCP回射服务+客户程序:正常启动与正常终止
- 10-9学习日记(map标签),FormView控件,ISAPI_REWRITE