必威体育Betway必威体育官网
当前位置:首页 > IT技术

js/jquery--实现全选、不全选

时间:2019-07-30 15:13:25来源:IT技术作者:seo实验室小编阅读:61次「手机版」
 

全选

为了熟悉一下table标签,所以这里用了table标签

思路:1.为全选多选框添加点击事件,判断该选框的checked属性(是否被点击),然后遍历tbody下的多选框,它们的checked属性与全选的相等

             2.遍历tbody下的多选框,定义一个变量用来存储tbody下的多选框是否都被选中了(如果有一个或多个没有被选中则为false);然后再次遍历tbody下的多选框,判断是否有多选框没有选中,如果有没选中的则设置flag为false;最后设置全选的checked为flag。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.main {
			width: 500px;
			height: 500px;
			margin: 50px auto;
		}
		.check {
			margin-top: 20px;
		}
		th {
			text-align: left;
		}
		tr {
			margin-right: 20px;
		}
	</style>
</head>
<body>
	<p class="main">
        <table>
			<thead>
				<tr>
					<th><input type="checkbox" id="checkAll"></th>
					<th>全选</th>
				</tr>
			</thead>
			<tbody id="t_body">
				<tr>
					<td><input type="checkbox" name="class" value="java"></td>
					<td>java</td>
				</tr>
				<tr>
					<td><input type="checkbox" name="class" value="c++"></td>
					<td>c++</td>
				</tr>
				<tr>
					<td><input type="checkbox" name="class" value="web前端"></td>
					<td>web前端</td>
				</tr>
				<tr>
					<td><input type="checkbox" name="class" value="从入门到放弃"></td>
					<td>从入门到放弃</td>
				</tr>
			</tbody>
		</table>
	</p>
	<script src="jquery-1.12.4.min.js"></script>
	<script>
		// 下面是用原生js
		/*// 获取全选多选框
		var all = document.getelementbyid("checkAll");
		// 获取tbody下的input
		var inputs = document.getElementById("t_body").getElementsByTagName("input");
		// inputs的长度
		var len = inputs.length;
		// 为全选多选框添加点击事件
		all.onclick = function () {
			for(let i = 0; i < len; i ++) {
				// 为每个多选框的checked都与全选all的checked相等
				inputs[i].checked = this.checked;
			}
		}
		// 为tbody下的多选框添加点击事件
		for(let i = 0; i < len; i ++) {
			inputs[i].onclick = function () {
				// 默认全部选中
				var flag = true;
				// 再次遍历,然后判断是否有选框还没有选中的,如果有,则设置flag为false
				for(let j = 0; j < len; j ++) {
					if(!inputs[j].checked) {
						flag = false;
					}
				}
				all.checked = flag;
			}
		}*/

		// 这是用jquery
		$(function() {
			// 获取全选多选框
			var $all = $("#checkAll");
			// 获取tbody下的input
			var $inputs = $("#t_body").find("input");
			// inputs的长度
			var $len = $inputs.length;
			// 为all添加点击事件
			$all.on("click", function() {
				// 因为属性是checked所以要用prop,如果用attr,有问题
				$inputs.prop("checked",this.checked);
			});
			// 为每个tbody下的input添加点击事件
			$inputs.on("click", function() {
				// 定义一个变量,默认为true
				var flag = true;
				/*这里如果直接用$inputs获取checked,只能获取第一个input的值,jquery的隐式迭代,设置的时候,都设置相同的值,而获取的时候,只获取第一个中的值*/
				// 所以还是要用for循环遍历inputs
				for(let i = 0; i < $len; i ++) {
					// $inputs[i]返回的是DOM对象
					if(!$inputs[i].checked){
						flag = false;
					}
				}
				$all.prop("checked",flag);
			});
			
		});
	</script>
</body>
</html>

相关阅读

JSF事件机制(一)

前言 JSF模拟了传统的C/S编程模式,它隐藏了传统Web变成的请求——响应通信模式,而是模拟了C/S变成中的事件通信机制。今天就了解一

生鲜电商“春播”,是如何从产品及运营入手逐步实现冷启

笔者之前曾与大家分享过《只要5步,实现从0-1冷启动》,今天笔者再借“生鲜电商「春播」的冷启动之路”这一案例来和大家聊聊冷启动的

Android游戏开发之2048游戏简单实现

没玩过2048的可以自己下一个玩玩,挺有趣的益智游戏。 本文实现了其简单的游戏逻辑,能够进行记分,游戏结束判断功能。重新开始以及保

Android--SQLite数据库实现增删改查

SQLite–轻量级数据库 一般常见于安卓客户端。用于存储一些重要数据,因其操作容易、使用简单的好处博得一大批迷妹。今天就来说一

c++实现一元三次方程

题目描述有形如:ax3+bx2+cx+d=0 这样的一个一元三次方程。给出该方程中各项的系数(a,b,c,d 均为实数),并约定该方程存在三个不同实根

分享到:

栏目导航

推荐阅读

热门阅读