微信小程序|复选框
欢迎点击「算法与编程之美」↑关注我们！
本文首发于微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。
问题描述
1 什么是复选框
复选框是一种可同时选中多项的基础控件，也是基于计算机语言的编程代码框架，它的作用是用鼠标点击进行操作，来完成选中多个目标。复选框，用方框表示。“复”表示两个或两个以上，“复选”表示可以选择两个或两个以上多个选项。复选框同单选框不同，单选框是圆的，只能选一个选项，不能选两个或两个以上多个选项。如下就是典型的复选框样式：
图1.1 效果图
2 相关属性
checkbox-group 多项选择器组，内部由多个checkbox组成，是制作复选框的重要组件。其常用属性如下：
图2.1 checkbox-group属性
复选框一般包含多个多选项目。在用代码进行编写的过程中，我们一般使用checkbox极其相关属性。如下则是checkbox属性：
图2.2 checkbox属性
3 制作复选框的过程
再了解上述相关属性之后，我们就可以进行复选框的编写。根据相关属性设置颜色，选中样式等。相关index.wxml代码如下：
|
在HTML中 表示空格，表示换行，但是在微信小程序这样的书写方式是不成立的。这是因为我们直接在wxml布局文件中，直接调用相关特殊符号的转义字符会无效，小程序的text文本控件的decode属性没有打开导致的。decode属性默认为false，不会解析我们的特殊字符，我们通过设置decode属性为true，并且调用其转义字符即可实现该特殊字符的显示。
在checkbox中我们采用for循环遍历的方式，显示各个选项。index.js文件代码如下：（最终显示效果如上图1.1所示）
Page({ data: { items: [ { name: 'CHN', value: '中国', checked: 'true' }, { name: 'USA', value: '美国' }, { name: 'JPN', value: '日本' }, ], items1:[ { name: 'WH', value: '武汉', checked: 'true' }, { name: 'JJS', value: '旧金山' }, { name: 'DJ', value: '东京' }, ] }, checkboxChange: function (e) { console.log('checkbox发生change事件，携带value值为：', e.detail.value) } }) |
END
实习编辑 | 王楠岚
责 编 | 刘 连
where2go 团队
微信号：算法与编程之美
长按识别二维码关注我们!
温馨提示：点击页面右下角“写留言”发表评论，期待您的参与！期待您的转发！
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！