利用JavaScript和jQuery实现全选全不选和反选功能

最新推荐文章于 2022-10-31 20:05:16 发布

没事多喝水w

最新推荐文章于 2022-10-31 20:05:16 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： JavaScript html 全选功能反选功能 jQuery

wang

本文链接：https://blog.youkuaiyun.com/w_sl_code/article/details/103226239

JavaScript 专栏收录该内容

4 篇文章

订阅专栏

在这里插入图片描述
代码如下
用JavaScript实现相关功能。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.blue{
				background-color: darkgrey;
			}
		</style>
		<script>
		//全选按钮
		function run1(){
			var ch = document.getElementsByClassName("ch");
			for(var i=0;i<ch.length;i++){
				ch[i].checked = true;
			}	
		}
		//全不选按钮
		function run2(){
			var ch = document.getElementsByClassName("ch");
			for(var i=0;i<ch.length;i++){
				ch[i].checked = false;
			}	
		}
		//反选按钮
		function run3(){
			var ch = document.getElementsByClassName("ch");
			for(var i=0;i<ch.length;i++){
				if(ch[i].checked){
					ch[i].checked = false;
				}else{
					ch[i].checked = true;
				}
				
			}	
		}
		</script>
	</head>
	<body >
		<table border="1px" cellpadding="0" cellspacing="0" width="80%" height="250px">
			<caption><font size="5"><b>员工信息表</b></font></caption>
			<tr>
				<th>
				<!-- onclick点击事件 -->
					<input type="button" value="全选" onclick="run1()" />
					<input type="button" value="全不选" onclick="run2()" />
					<input type="button" value="反选" onclick="run3()" />
				</th>
				<th>员工编号</th>
				<th>员工姓名</th>
				<th>员工年龄</th>
				<th>操作</th>
			</tr>
			<tr>
				<td ><input type="checkbox" class="ch" /></td>
				<td>1</td>
				<td>孙悟空</td>
				<td>19</td>
				<td>
					<a href="">修改</a>
					<a href="">删除</a>
				</td>
				
			</tr>
			<tr>
				<td ><input type="checkbox" class="ch"/></td>
				<td>2</td>
				<td>唐僧</td>
				<td>60</td>
				<td>
					<a href="">修改</a>
					<a href="">删除</a>
				</td>
			</tr>
			<tr>
				<td ><input type="checkbox" class="ch"/></td>
				<td>3</td>
				<td>猪八戒</td>
				<td>25</td>
				<td>
					<a href="">修改</a>
					<a href="">删除</a>
				</td>
			</tr>
			<tr>
				<td ><input type="checkbox" class="ch"/></td>
				<td>4</td>
				<td>沙僧</td>
				<td>30</td>
				<td>
					<a href="">修改</a>
					<a href="">删除</a>
				</td>
			</tr>
		</table>
	</body>
</html>

补充使用jQuery实现

<script>
	//全选
	function f(){
		//获取所有复选框
		$(".itemSelect").prop("checked",true);
	}
	//全不选
	function f2(){
		//获取所有复选框
		var v = $(".itemSelect");
		v.prop("checked",false);
	}
	//反选
	function f3(){
		//获取页面中已经选中的复选框
		var v1 = $(".itemSelect:checked");
		//获取页面中没有选中的复选框
		var v2 = $(".itemSelect:not(.itemSelect:checked)");
		//将选中的复选框中的状态设置为true
		v1.prop("checked",false);
		v2.prop("checked",true);	
	}
	//反选，数组遍历做
	function f4(){
		$(".itemSelect").each(function(){
			//获取当前选中复选框的状态
			var temp = $(this).prop("checked");
			$(this).prop("checked",!temp);
		});
	}
		
		</script>