使用iquery实现全选、全不选、反选功能

meng_hc

于 2021-08-13 17:50:44 发布

阅读量233

点赞数

分类专栏： Javaweb 文章标签： checkbox js jQuery

本文链接：https://blog.csdn.net/qq_47888755/article/details/119681144

版权

Javaweb 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

实现全选、全不选、反选

- - 实现效果
  - 代码

实现效果

在这里插入图片描述

代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
	
	$(function(){
		//全选  先给按钮绑上单击事件
		$("#checkedAllBtn").click(function () {
			//获取全部的复选框给它选中
			$(":checkbox").prop("checked",true);
        });

		//全不选
		$("#checkedNoBtn").click(function () {
			//获取全部的复选框
			$(":checkbox").prop("checked",false);
        });

		//反选
		$("#checkedRevBtn").click(function () {
			//取得相反的复选框
			//反选，是经济上只操作对应的4个具体运动，是否全选or全不选的框，不在考虑的范围之内

			//先查询出所有的球类的复选框
			//然后进行遍历，看哪个选上了，哪个没有选上
			$(":checkbox[name='items']").each(function () {
				//在each()遍历的函数中，使用this对象（当前正在遍历到的DOM对象）进行相关的操作
				this.checked = !this.checked;//对 现在的状态取反
            });

			//在操作完4个球类之后，回头看一下是否符合满选。并做出相应的操作
			//获取全部的	球类个数，再获取选中的球类个数
			var allCounts = $(":checkbox[name='items']").length;
			var checkedCounts = $(":checkbox[name='items']:checked").length;

			// if(allCounts==checkedCounts){
			//     $("#checkedAllBox").prop("checked",true);
			// } else {
             //    $("#checkedAllBox").prop("checked",false);
			// }
			//可以优化为：
            $("#checkedAllBox").prop("checked",allCounts==checkedCounts);
        });

		//提交
		$("#sendBtn").click(function () {
			$(":checkbox[name='items']:checked").each(function () {
				alert(this.value);
            });
        });

		//全选/全不选 按钮(位于最上面的按钮)
		$("#checkedAllBox").click(function () {
			//要操作下面的4个球类

			//在事件的function()中，有一个this对象。这个this对象，是当前正在响应事件的DOM对象
			// alert(this.checked);
			$(":checkbox[name='items']").prop("checked",this.checked);
        });

		//要给下面的 4个球类的复选框，都绑上单击事件
		//实现：一个球类运动的选择与否，也可以影响到，反映整个所有的球类是否实现 全选
        $(":checkbox[name='items']").click(function () {
			//实现：每一个球类运动的按钮，在点击的时候进行判断：选中的球类数目 与 总共有的球类数目的大小。
            //二者相等的话，是满选，应该自动勾选，【全选/全不选】项；相反，由满选变为非满选的时候，就应该自动把该项 去掉勾选状态。
            //其实，是跟实现反选的代码是一样的
            //获取全部的	球类个数，再获取选中的球类个数
            var allCounts = $(":checkbox[name='items']").length;
            var checkedCounts = $(":checkbox[name='items']:checked").length;
            $("#checkedAllBox").prop("checked",allCounts==checkedCounts);

        });

	});
	
</script>
</head>
<body>

	<form method="post" action="">
	
		你爱好的运动是？<input type="checkbox" id="checkedAllBox" />全选/全不选 
		
		<br />
		<input type="checkbox" name="items" value="足球" />足球
		<input type="checkbox" name="items" value="篮球" />篮球
		<input type="checkbox" name="items" value="羽毛球" />羽毛球
		<input type="checkbox" name="items" value="乒乓球" />乒乓球
		<br />
		<input type="button" id="checkedAllBtn" value="全　选" />
		<input type="button" id="checkedNoBtn" value="全不选" />
		<input type="button" id="checkedRevBtn" value="反　选" />
		<input type="button" id="sendBtn" value="提　交" />
	</form>

</body>
</html>

行百里者，半九十！
坚持下去！！！

meng_hc

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用iquery实现全选、全不选、反选功能

实现全选、全不选、反选实现效果代码实现效果代码<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert
复制链接

扫一扫

专栏目录