利用js 实现 checkbox全选计算

射手座的程序媛

已于 2023-12-12 09:09:15 修改

阅读量384

点赞数 10

分类专栏：前端文章标签： javascript 前端开发语言

于 2023-12-12 09:03:02 首次发布

本文链接：https://blog.csdn.net/ly121862/article/details/134940187

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

效果图

https://live.csdn.net/v/350847

本次内容的目标就是利用js实现checkbox 全选计算的功能

本次设计有两种实现方法第一种采用table布局,第二种采用div方式布局

页面设计

table布局

建立 html页面,编写如下代码:

<div>
			<h1>使用 table 来实现-- 方式1</h1>
			<table>
				
				<tr>
					<td><input type="checkbox" id="ck_all_1"/></td>
					<td>姓名</td>
					<td>薪水</td>
				</tr>
				<tr>
					<td><input type="checkbox" class="ck_1"/></td>
					<td>李四</td>
					<td class="sal">5000</td>
				</tr>
				
				<tr>
					<td><input type="checkbox" class="ck_1"/></td>
					<td>王丽</td>
					<td class="sal">6000</td>
				</tr>
				<tr>
					<td><input type="checkbox" class="ck_1"/></td>
					<td>赵四</td>
					<td class="sal">8000</td>
				</tr>
				<tr>
					<td><input type="checkbox" class="ck_1"/></td>
					<td>赵四</td>
					<td class="sal">8000</td>
				</tr>
				<tr>
					<td><input type="checkbox" class="ck_1"/></td>
					<td>赵四</td>
					<td class="sal">8000</td>
				</tr>
			</table>
			<div>
				<button >计算</button>
				<div id="sum_1">0</div>
			</div>
		</div>

此时运行页面效果如下:

为了编写少量的js代码, 这里我们引入了jquery的js库,

jQuery 是一个 JavaScript 库，它简化了 JavaScript 与 HTML DOM 之间的交互。它提供了很多易于使用的函数和方法，使得快速开发交互式 Web 页面变得更容易。jQuery 的主要特点包括选择器、事件处理、DOM 操纵、Ajax 支持等。它是一个轻量级的库，易于学习和使用。在 Web 开发中，jQuery 可以用于创建动态的网页特效、增强用户交互体验、管理动态网页内容、进行数据提取和数据操作等等。

引入jquery的js文件

<script src="js/jquery-1.12.4.min.js"></script>
<script>

    $(function(){
		
		// 实现 table 中的 checkbox 的全选与取消全选
		$("#ck_all_1").click(function(){
			
			$(".ck_1").prop("checked",this.checked);
			
		});
		
		
		
		
		// 实现 table 中的 计算功能 
		$("button:eq(0)").click(function(){
			let sum=0;
			// 遍历 选中的所有的 checkbox
			$(".ck_1:checked").each(function(i,element){
				let str = $(element).parent().parent().find(".sal").text();
				sum+=parseFloat(str);
			});
			$("#sum_1").html(sum);
			
		});
		
		
		
	});


</script>

运行即可出现视频的效果

div布局

html 代码如下:

<div>
			<h1>使用 div 来实现--方式2</h1>
			<div>
				<div><input type="checkbox" id="ck_all_2"/>  姓名 薪水 </div>
				<div><input type="checkbox" class="ck_2"/>李四<span>4000</span></div>
				<div><input type="checkbox" class="ck_2"/>王丽<span>5000</span></div>
				<div><input type="checkbox" class="ck_2"/>刘立<span>6000</span></div>
				<div><input type="checkbox" class="ck_2"/>刘立<span>6000</span></div>
				<div><input type="checkbox" class="ck_2"/>刘立<span>6000</span></div>
				
				<div><input type="checkbox" class="ck_2"/>刘立<span>6000</span></div>
				<div><input type="checkbox" class="ck_2"/>刘立<span>6000</span></div>
			</div>
			<div>
				<button>计算</button>
				<div id="sum_2">0</div>
			</div>
		</div>

js代码如下:

<script src="js/jquery-1.12.4.min.js"></script>
<script>

    $(function(){
		
	
		
		// 实现 div 方式 的 checkbox 的全选与取消全选
		$("#ck_all_2").click(function(){
			
			$(".ck_2").prop("checked",this.checked);
			
		});
		
		
		// 实现 div 中的计算功能
		$("button:eq(1)").click(function(){
			let sum = 0;
			$(".ck_2:checked").each(function(i,ele){
				let str2 = $(ele).parent().find("span").html();
				sum+=parseFloat(str2);
			});
			$("#sum_2").html(sum);
		});
		
	});


</script>

运行即可.

全部代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		
		
		
		做一个 带由复选框的 员工4月工资表,包含6名员工, 薪资 自定, 计算 选中员工的总薪资,(点击计算按钮后,为div 赋值)
		实现 全选的功能
		
		
		<div>
			<h1>使用 table 来实现-- 方式1</h1>
			<table>
				
				<tr>
					<td><input type="checkbox" id="ck_all_1"/></td>
					<td>姓名</td>
					<td>薪水</td>
				</tr>
				<tr>
					<td><input type="checkbox" class="ck_1"/></td>
					<td>李四</td>
					<td class="sal">5000</td>
				</tr>
				
				<tr>
					<td><input type="checkbox" class="ck_1"/></td>
					<td>王丽</td>
					<td class="sal">6000</td>
				</tr>
				<tr>
					<td><input type="checkbox" class="ck_1"/></td>
					<td>赵四</td>
					<td class="sal">8000</td>
				</tr>
				<tr>
					<td><input type="checkbox" class="ck_1"/></td>
					<td>赵四</td>
					<td class="sal">8000</td>
				</tr>
				<tr>
					<td><input type="checkbox" class="ck_1"/></td>
					<td>赵四</td>
					<td class="sal">8000</td>
				</tr>
			</table>
			<div>
				<button >计算</button>
				<div id="sum_1">0</div>
			</div>
		</div>
		
		
		
		<div>
			<h1>使用 div 来实现--方式2</h1>
			<div>
				<div><input type="checkbox" id="ck_all_2"/>  姓名 薪水 </div>
				<div><input type="checkbox" class="ck_2"/>李四<span>4000</span></div>
				<div><input type="checkbox" class="ck_2"/>王丽<span>5000</span></div>
				<div><input type="checkbox" class="ck_2"/>刘立<span>6000</span></div>
				<div><input type="checkbox" class="ck_2"/>刘立<span>6000</span></div>
				<div><input type="checkbox" class="ck_2"/>刘立<span>6000</span></div>
				
				<div><input type="checkbox" class="ck_2"/>刘立<span>6000</span></div>
				<div><input type="checkbox" class="ck_2"/>刘立<span>6000</span></div>
			</div>
			<div>
				<button>计算</button>
				<div id="sum_2">0</div>
			</div>
		</div>
		
		
		
	</body>
</html>
<script src="js/jquery-1.12.4.min.js"></script>
<script>

    $(function(){
		
		// 实现 table 中的 checkbox 的全选与取消全选
		$("#ck_all_1").click(function(){
			
			$(".ck_1").prop("checked",this.checked);
			
		});
		
		
		// 实现 div 方式 的 checkbox 的全选与取消全选
		$("#ck_all_2").click(function(){
			
			$(".ck_2").prop("checked",this.checked);
			
		});
		
		// 实现 table 中的 计算功能 
		$("button:eq(0)").click(function(){
			let sum=0;
			// 遍历 选中的所有的 checkbox
			$(".ck_1:checked").each(function(i,element){
				let str = $(element).parent().parent().find(".sal").text();
				sum+=parseFloat(str);
			});
			$("#sum_1").html(sum);
			
		});
		
		
		// 实现 div 中的计算功能
		$("button:eq(1)").click(function(){
			let sum = 0;
			$(".ck_2:checked").each(function(i,ele){
				let str2 = $(ele).parent().find("span").html();
				sum+=parseFloat(str2);
			});
			$("#sum_2").html(sum);
		});
		
	});


</script>