首页 > 编程学习 > 判断复选框checkbox是否被选中,及全选实现

判断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;}}}

本文链接:https://www.ngui.cc/el/1461161.html
Copyright © 2010-2022 ngui.cc 版权所有 |关于我们| 联系方式| 豫B2-20100000