checkbox、radio

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

checkbox 是复选框 .. 在小程序的页面上添加一组复选框,可以先用一组 checkbox-group .. 上面可以用一个 name ,给这组复选框起个名字 .. 每一组复选框都可以放在一组单独的 checkbox-group 里面 ..

它里面是不同的复选框项目 .. 每个项目可以用一个 label ,添加一个标签 .. 在 text 组件里面设置一下标签文字 ..

复选框项目用的是 checkbox 组件 .. 它上面 value 属性表示的是这个复选框的值 .. 也就是用户如果勾选了这组复选框里的这个项目 .. 这个 value 属性的值就会包含在复选框群组里面 ..

添加两个这样的项目 ..

然后在 checkbox-group 上面可以绑定一个 change 事件 .. 复选框发生变化会触发这个事件 .. 我们可以用之前创建的 inputHandler 来处理一下 ..

保存一下 ..

再到开发者工具里面去预览一下 .. 勾选一下复选框 .. 注意控制台上会输出复选框群组的值 ..

再提交一下表单 .. 复选框群组里的数据可以在表单里得到 .. 这个数据是一个数组 ... 数组项目就是被勾选的复选框的值 ..

一般如果我们有一组复选框 .. 可以用一下循环来输出 .. 可以在页面的 data 里面添加一组数据 .. 比如 items .. 每个对象里都可以有个 name 属性,表示项目的名字 .. 还有一个 value 属性,表示对应的值 ..

再添加两个这样的项目 ..

回到视图文件 .. 这里只留下一个复选框项目 .. 然后在这个 label 上面用一个 wx:for ,循环一下页面里的 items .. 再添加一个 wx:key ,指定一下项目的索引的名字 ..

text 组件里的东西可以绑定一个 item.name .. 复选框的值是 item.value ..

回到开发者工具 .. 页面上会显示一组复选框项目 ...

radio

radio,单选按钮的用法跟 checkbox 差不多 .. 一组单选按钮要放在 radio-group 里面 .. 再修改一下它的名字 .. 同样可以 bind 一个 change 事件 ..

单选按钮也需要一个 label .. 单选按钮项目用的是 radio 组件 .. 保存一下文件 ..

现在页面上会显示一组单选按钮 ..

用户可以选择这组单选按钮里面的其中的一个 .. 提交一下表单 .. 单选按钮组的值可以在表单的 submit 事件处理里面找到 ..

checkbox、radio《 微信小程序:组件 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点