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

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

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

判断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;
        }
      }
    }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值