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

2024年11月22日 02:51:56 • 投稿 • 阅读 151

checkbox复选框与上一章讲的radio 单选框的属性相似，表现在：

1、可以通过color属性来修改颜色；

2、需搭配checkbox-group 一起使用。

checkbox复选框与radio 单选框不同的地方在于：

checkbox可同时选择多个元素，不是单一的选项。

啥意思呢？有点不懂？

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

来，上需求：

设置三个水果选项，选中其中任意一个，下面都有提示文字。

操作步骤如下：

1、新建页面demo16

2、打开demo16.js 文件，只保留data部分，其余删除。添加数组list，写入如下代码：

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>

保存后，小程序页面出现三个选项，如下图：

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

4、使用checkbox-group 绑定事件”handleitemchange”，代码如下：

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

5、复制事件”handleitemchange”，回到demo16.js文件中粘贴，

并且在list数独后加如下代码，其中的意义如下注释：

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

ps：这里注意的一点是：

这一步demo16.js文件中的复选框的选中事件”handleitemchange”，

应来自demo16.wxml文件中的事件”handleitemchange”！

一定要把demo16.wxml文件中的事件”handleitemchange” 复制粘贴至demo15.js文件中，才能完成渲染！！！

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

6、回到demo16.wxml文件中，在view标签中再加入一个view标签，如下：

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

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

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

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

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

这也就解释了checkbox复选框与radio 单选框不同的地方在于：

checkbox可同时选择多个元素，不是单一的选项。

这一含义。

至此，我们的需求就完成了，已实现设置三个水果选项，选中其中任意一个，下面都有提示文字。

是不是很简单，哈哈。

其余基础知识请移步官方文档~

原创文章，作者：admin，如若转载，请注明出处：https://www.qq65hfghe5.com/tg/116051.html

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

相关推荐