jquery实现checkbox的全选和反选

最新推荐文章于 2024-05-08 17:11:32 发布

我是一只萌新小菜鸟

最新推荐文章于 2024-05-08 17:11:32 发布

阅读量176

点赞数

分类专栏： jquery小练习文章标签： html

本文链接：https://blog.csdn.net/Denghalou/article/details/82703613

版权

jquery小练习专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<script type="text/javascript" src="js/jquery-1.10.2.min.js" ></script>
	<body>
		
		<input type="checkbox" name="" id="selAll" />全选
		<input type="checkbox" name="" id="resSel" />反选
		<br />
		<input type="checkbox" name="test" value="Test1"/>Test1
		<input type="checkbox" name="test" value="Test2"/>Test2
		<input type="checkbox" name="test" value="Test3"/>Test3
		<input type="checkbox" name="test" value="Test4"/>Test4
		<input type="checkbox" name="test" value="Test5"/>Test5
		
		<button id="btn">提交</button>
		
	</body>
	<script type="application/javascript">
		$(function(){
			$("#btn").click(function(){
				var arr = new Array();
				$("input[name='test']:checked").each(function(){
					arr.push($(this).val());
				});
				if(arr != null){
					for(var i = 0; i < arr.length; i++){
						alert(arr[i]);
					}
				}
			
			});
			$("#selAll").click(function(){
				var flag = $(this).is(":checked");
				//var flag = $("#selAll").prop("checked");
				//prop可用来设置属性
				$("input[name='test']").prop("checked",flag);
			
			});
			$("#resSel").click(function(){
				$("input[name='test']").each(function(){
					var flag = $(this).is(":checked");
					$(this).prop("checked",!flag);
				});
			});
				
		})
	</script>
</html>

我是一只萌新小菜鸟

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery实现checkbox的全选和反选

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;script type="text/javascript" src="js/jq
复制链接

扫一扫

专栏目录