js复选框全选反选 js获取checkbox是否选中

该复选框类似于上一章中单选按钮框的属性，如所示:1.可以通过颜色属性修改颜色；2.它需要与复选框组一起使用。该复选框与单选单选单选框的不同之处在于:复选框可以同时选择多个

该复选框类似于上一章中单选按钮框的属性，如所示:

1.可以通过颜色属性修改颜色；

2.它需要与复选框组一起使用。

该复选框与单选单选单选框的不同之处在于:

复选框可以同时选择多个元素，而不是单个选项。

你什么意思？有点迷茫？

来吧，要求:

设置三个水果选项，选择任意一个，下面都有提示词。

操作步骤如下:

1.创建新页面演示16

2.打开demo16.js文件，只保留数据部分，删除其余部分。添加数组列表并编写以下代码:

Page({ data: { list:[ { id:0, name:"", value:"apple" }, { id:1, name:"", value:"grape" }, { id:2, name:"", value:"bananer" } ], checkedList:[] },})

3.打开demo16.wxml文件，删除原代码，编写以下代码进行渲染。

<view><checkbox-group bindchange=" "><checkbox value="{{item.value}}" wx:for="{{list}}" wx:key="id">{{item.name}}</checkbox></checkbox-group></view>

保存后，applet页面出现三个选项，如下图所示:

4.使用复选框组绑定事件”handleitemchange & # 8221，代码如下:

<view><checkbox-group bindchange="handleItemChange"><checkbox value="{{item.value}}" wx:for="{{list}}" wx:key="id">{{item.name}}</checkbox></checkbox-group></view>

5.复制事件”handleitemchange & # 8221，回到demo16.js文件粘贴，

并在列表Sudoku后添加以下代码，其含义如下:

// 复选框的选中事件handleItemChange(e){// 1 获取被选中的复选框的值const checkedList=e.detail.value;// 2 进行赋值this.setData({checkedList})}

Ps:这里需要注意的一点是:

在这一步中，demo16.js文件中的复选框被选中”handleitemchange & # 8221,

应该来自demo16.wxml文件中的事件”handleitemchange & # 8221！

确保将事件放在demo16.wxml文件中”handleitemchange & # 8221复制到demo15.js文件完成渲染！！！

6.返回demo16.wxml文件，向视图标记添加另一个视图标记，如下所示:

<view>选中的水果:{{checkedList}}</view>

保存后，小程序页面如下:

我们可以同时选择三个选项，下面有相应的提示文字。

这解释了复选框和单选单选单选框之间的区别:

复选框可以同时选择多个元素，而不是单个选项。

这个意思。

至此，我们的需求完成了，我们设置了三个水果选项。选择其中任意一个，下面都有提示词。

是不是很简单，哈哈。

其余基础知识请移至公文~