js表单全选和取消全选案例

m0_63400611

已于 2022-05-18 15:55:06 修改

阅读量107

点赞数 1

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

于 2021-11-25 15:47:01 首次发布

本文链接：https://blog.csdn.net/m0_63400611/article/details/121539397

版权

js 专栏收录该内容

55 篇文章 2 订阅

订阅专栏

这段HTML和JavaScript代码展示了如何实现表格中全选复选框与各行复选框状态的联动。当全选复选框被点击时，所有行的复选框会根据全选状态进行同步；反之，当任意一行复选框状态改变时，全选复选框会更新其状态以反映表格中所有复选框的选中情况。

摘要由CSDN通过智能技术生成

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>333333</title>
	<style>
		.first {
			
		}
		table {
			text-align: center;
			width: 180px;
			border: 1px solid black;
			cellspacing="0";
		}
		td {
			border: 1px solid black;
		}
	</style>
</head>

<body>

	<table>
		<thead>
			<tr>
				<td ><input type="checkbox" id="j_cbAll"></td>
				<td >商品</td>
				<td>价钱</td>
			</tr>
		</thead>
		<tbody id="j_tb">
			<tr>
				<td ><input type="checkbox"></td>
				<td >商品</td>
				<td>价钱</td>
			</tr>
			<tr>
				<td><input type="checkbox"></td>
				<td >商品</td>
				<td>价钱</td>
			</tr>
			<tr>
				<td ><input type="checkbox"></td>
				<td >商品</td>
				<td>价钱</td>
			</tr>
			<tr>
				<td ><input type="checkbox"></td>
				<td >商品</td>
				<td>价钱</td>
			</tr>
		</tbody>
	</table>
		
	<script>
		var j_cbAll = document.getElementById('j_cbAll');
		var j_tbs = document.getElementById('j_tb').getElementsByTagName('input');
		
		j_cbAll.onclick = function() {
//			console.log(this.checked);
			for(var i=0; i < j_tbs.length; i++) {
				j_tbs[i].checked = this.checked;
			}
		}
		for(var i = 0; i < j_tbs.length; i++) {
			j_tbs[i].onclick = function() {
				var flag = true;
				for(var i = 0; i < j_tbs.length; i++) {
//					if(j_tbs[i].checked != j_cbAll.checked){
//						j_cbAll.checked = '';
//					}
//					if(j_tbs[i].checked == true){
//						j_cbAll.checked = 'checked';
//					}
					/*尝试↑*/
                    /*案例教学↓*/
					if(!j_tbs[i].checked) {
						flag = false;
					}
				}
				j_cbAll.checked = flag;
			}
		}
	</script>
</body>
</html>

设置flag = true,在每次点击复选框时检测是否所有<tbody>中复选框都为checked状态,若不是则将flag变量改为false,并在方法中将flag的值赋值给<j_cbAll>中的复选框

m0_63400611

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js表单全选和取消全选案例

<!doctype html><html><head><meta charset="utf-8"><title>333333</title> <style> .first { } table { text-align: center; width: 180px; border: 1px solid black; cellspacing="0"; } td { .
复制链接

扫一扫

专栏目录