在javascript中怎样获得checkbox里选中的多个值、全选、取消全选。

最新推荐文章于 2023-07-18 09:36:56 发布

Rui

最新推荐文章于 2023-07-18 09:36:56 发布

阅读量532

点赞数 1

分类专栏： JavaScript 文章标签： JavaScript HTML web css

本文链接：https://blog.csdn.net/weixin_44863165/article/details/92085028

版权

JavaScript 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

javascript如何获得checkbox里选中的多个值、全选、取消全选。（水果购物车为例）

HTML代码：
将每个水果设置相同的name在js中以获取name的方式获取这些水果。

<body>
	<input type="checkbox" value="10" name="fruit" id="0" onClick="add(this.id)">苹果10元<br>
	<input type="checkbox" value="20" name="fruit" id="1" onClick="add(this.id)">香蕉20元<br>
	<input type="checkbox" value="30" name="fruit" id="2" onClick="add(this.id)">西瓜30元<br>
	<input type="checkbox" value="40" name="fruit" id="3" onClick="add(this.id)">葡萄40元<br>
	<input type="checkbox" value="50" name="fruit" id="4" onClick="add(this.id)">桂圆50元<br>
	总价格：<span id="sum">0</span>元<br>
	<input type="checkbox" name="allchoose" id="all" onClick="add(this.id)">全选
</body>

每个水果的id是0.1.2.3.4按js中获取name数组序号的顺序写的。
js代码：
js中fruit获取checkbox中的每个水果返回fruit数组。
解读见注释

<script>
		function add(obj){
			var fruit = document.getElementsByName("fruit");
			var sum = document.getElementById("sum");
			var all = document.getElementById("all");
			var a = 0;
			if(obj == "all"){	//判断是不是全选按钮
				if(all.checked == true){	//选中全选时
					for(var i = 0;i<fruit.length;i++){
						fruit[i].checked = true;
						a += parseInt(fruit[i].value);
						sum.innerHTML = a;
					}
				}
				else{						//取消全选时
					for(i in fruit){
						fruit[i].checked = false;
						sum.innerHTML = 0;
					}
				}
			}
			else{							//单选
				if(fruit[parseInt(obj)].checked){	//obj为选中的水果的id
					sum.innerHTML = parseInt(sum.innerHTML) + parseInt(fruit[parseInt(obj)].value);
				}
				else{								//取消单选
					sum.innerHTML = parseInt(sum.innerHTML) - parseInt(fruit[parseInt(obj)].value); 
				}
			}
		}
	</script>

演示效果：

谢谢！

Rui

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
在javascript中怎样获得checkbox里选中的多个值、全选、取消全选。

javascript如何获得checkbox里选中的多个值、全选、取消全选。（水果购物车为例）HTML代码：将每个水果设置相同的name在js中以获取name的方式获取这些水果。<body> <input type="checkbox" value="10" name="fruit" id="0" onClick="add(this.id)">苹果10元<br...
复制链接

扫一扫