判断复选框checkbox是否被选中，及全选实现

Vue.js中复选框状态判断与全选功能实现

最新推荐文章于 2022-09-28 22:18:55 发布

原创最新推荐文章于 2022-09-28 22:18:55 发布 · 2.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#html #checkbox #javascript #vue.js

JavaScript 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了在Vue.js项目中如何判断复选框（checkbox）是否被选中，以及实现全选功能的详细步骤。重点在于使用`document.getElementById`来正确获取复选框的状态，并通过Vue的响应式系统更新商品总价。同时，文章还提出了全选功能的实现思路，包括监听全选框的点击事件，遍历并同步所有选项的状态。

判断checkbox是否被选中

在用vue实现购物车的选中功能时，总价变为只计算选中商品的总价，出现无法判断复选框是否选中的问题。
最后发现应该用document.getElementById去获取id值，而不是ByName获取name值。

首先给input添加id属性与点击事件：

<input type="checkbox" id="checked" @click="handleChecked(index)">

其中@为v-on的语法糖，index为该商品序号，
handleChecked函数：

handleChecked: function (index) {
      let item = this.list[index];
      if (document.getElementById(index).checked) {
        item.checked = true;
      }else {
        item.checked = false;
      }
    }

这里通过改变商品列表checked的值，在总价这个计算属性里加上选中的商品总价。

全选实现

大概思路是：
1、点击全选框触发点击事件；
2、遍历所有选项，如果全选框为选中状态，则每个选项都设置为选中状态；
3、否则取消每个选项的选中状态：

handleAllChecked: function () {
      for (let i = 0; i < this.list.length; i++) {
        let item = this.list[i];
        if (document.getElementById('allChecked').checked) {
          document.getElementById(i).checked = true;
          item.checked = true;
        } else {
          document.getElementById(i).checked = false;
          item.checked = false;
        }
      }
    }