js表单全选和取消全选

最新推荐文章于 2024-07-14 12:56:18 发布

萝卜头不吃萝卜头

最新推荐文章于 2024-07-14 12:56:18 发布

阅读量839

点赞数 5

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/SqlloveSyn/article/details/126285883

版权

这是一个全选和取消全选的功能，最上边的是全选框，下边的是单选框。

1. 全选框选中，下边的所有单选框也都选中，全选框取消选中，下边的单选全不选中。如果全选选中情况下，下边的取消选中一个，哪上边的全选框就不选中。

2. 第二就是下边的单选框一个一个选中，等到下边的单选框全部选中后，上边的全选框选中。同样取消一个单选，全选就不选中。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.wrap{
				border: 1px solid black;
				width: 150px;
			}
			tr{
				border: 1px solid black;
			}
		</style>
	</head>
	<body>
		<div class="wrap">
			<table>
				<thead>
					<tr>
						<th>
							<input type="checkbox" id="j_cbALL">
						</th>
						<th>全选</th>
						<th></th>
					</tr>
				</thead>
				<tbody id="j_tbs">
					<tr>
						<td>
							<input type="checkbox">
						</td>
						<td>iPhone1</td>
						<td>3000</td>
					</tr>
					<tr>
						<td>
							<input type="checkbox">
						</td>
						<td>iPhone2</td>
						<td>4000</td>
					</tr>
					<tr>
						<td>
							<input type="checkbox">
						</td>
						<td>iPhone3</td>
						<td>5000</td>
					</tr>
					
				</tbody>
			</table>
		</div>
		
		<script>
            // 全选和取消全选做法：让下面所以复选框的checked属性(选中状态)跟随全选按钮即可
			var j_cbALL = document.getElementById('j_cbALL');
			var j_tbs = document.getElementById('j_tbs').getElementsByTagName('input'); // 下面的所有复选框
			j_cbALL.onclick = function(){
            // this.checked 它可以得到当前复选框的选中状态 如果是true就是选中，如果是false就是未选中
				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(){
                    // flay 控制全选按钮是否选中
					var flay = true;
                    // 每次点击下面的复选框都要循环检查所有按钮是否全被选中
					for(var i = 0; i < j_tbs.length; i++){
						if(!j_tbs[i].checked){
							flay = false;
                            // 退出for循环，这样可以提高效率 因为只要有一个没选中，剩下的就不需要循环判断
                            break;
						}
					}
					j_cbALL.checked = flay;
				}
			}
			
			
		</script>
	</body>
</html>

萝卜头不吃萝卜头

关注

5
点赞
踩
1

收藏

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

1. 全选框选中，下边的所有单选框也都选中，全选框取消选中，下边的单选全不选中。如果全选选中情况下，下边的取消选中一个，哪上边的全选框就不选中。2. 第二就是下边的单选框一个一个选中，等到下边的单选框全部选中后，上边的全选框选中。同样取消一个单选，全选就不选中。这是一个全选和取消全选的功能，最上边的是全选框，下边的是单选框。...
复制链接

扫一扫