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

判断复选框checkbox是否被选中，及全选实现相关推荐

java中判断复选框是否选中_php 判断复选框checkbox是否被选中
php 判断复选框checkbox是否被选中复选框checkbox在php表单提交中经常被使用到,本文章通过实例向大家介绍php如何判断复选框checkbox中的值是否被选中,需要的朋友可以参考一下 ...
复选框checkbox如何一直选中，不能去掉勾选
在工作中遇到一个问题,那就是多个复选框,有一项是要求一直都要被选中的,不能去掉勾选,如果用了<input type="checkbox" disabled>的disab ...
php复选框如何选取值,php判断复选框值是否被选中的方法
码农公社 210.net.cn 210是何含义?10月24日是程序员节,1024 =210.210既 210 之意. php判断复选框值是否被选中的方法本文介绍两个知识点: 1.如何获取复选框c ...
jQuery操作复选框checkbox技巧总结 ---- 设置选中、取消选中、获取被选中的值、判断是否选中等
jQuery操作复选框checkbox技巧总结 --- 设置选中.取消选中.获取被选中的值.判断是否选中等一.checked属性定义先了解下input标签的checked属性: 1.HTML &l ...
php 获取checkbox是否选中,javascript操作html复选框checkbox:如何判断复选框是否被选中...
(由www.169it.com搜集整理) 在PHP中,html复选框checkbox被选中,则提交的值是on,否则就是空,所以可以通过value值判断是否被选中.在JavaScript中,貌似不管您选 ...
复选框checkbox如何判定为被选中
近期,我在开发网站的考试系统时,遇到了一个关于复选框checkbox如何判定为被选中的问题.网上的说法很多,但是没有说到重点上的,而这篇文章解释的很详细,于是,我把它记录下来.原始博客地址:http: ...
vue复选框CheckBox清空选中的值
最近遇到了这样的一个问题,做了一个添加功能,发现添加了一次记录以后,添加第二次的时候,页面上复选框有我上次选中的值,后来试了很多方法,只有下面这个方法解决了这个问题.上面标出来的是对普通的input进 ...
JS判断GridView中复选框有没有被选中
在执行多选操作时,如果在页面前台做下判断,有没有选择要被操作的项,如果没有,提示一下,会给客户一种比较友好的效果. //JS中判断的方法: //判断GridView控件中的复选框有没有被选中的,gdv ...
【Android】-- 按钮（复选框CheckBox、开关按钮Switch、单选按钮RadioButton）
CompoundButton在XML文件中主要使用下面两个属性. checked:指定按钮的勾选状态,true表示勾选,false则表示未勾选,默认为未勾选. button:指定左侧勾选图标的图形资源 ...

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

判断checkbox是否被选中

全选实现

判断复选框checkbox是否被选中，及全选实现相关推荐

最新文章

热门文章