jQuery写全选或全不选

最新推荐文章于 2023-08-16 19:57:15 发布

杪＆秋

最新推荐文章于 2023-08-16 19:57:15 发布

阅读量91

点赞数

分类专栏： jQuery 文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/m0_51435825/article/details/128275085

版权

jQuery 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>全选或全不选案例</title>
		<script src="js/jquery-1.7.2.min.js"></script>
		<script>
			$(function(){
				var checkAllBox = $("#checkAllBox");
				var items = $(":checkbox[name=items]");
				/* 全选 */
				$("#btn1").click(function(){
					items.prop('checked',true);
					checkAllBox.prop('checked',true);
				});
				/* 全不选 */
				$("#btn2").click(function(){
					items.prop('checked',false);
					checkAllBox.prop('checked',false);
				});
				/* 反选 */
				$("#btn3").click(function(){
					items.each(function(){
						/* 遍历取反 */
						this.checked=!this.checked;
					});
					checkAllBox.prop('checked',items.filter(":not(:checked)").length==0);
				});
				/* 提交 */
				$("#sendbtn").click(function(){
					items.filter(":checked").each(function(){
						alert(this.value);
					});
				});
				/* 全选或全不选 */
				$("#checkAllBox").click(function(){
					items.prop('checked',this.checked);
				});
				
				items.click(function(){
					checkAllBox.prop('checked',items.filter(":not(:checked)").length==0);
				});
			});
		</script>
	</head>
	<body>
		<form >
			您的爱好是：
			<input type="checkbox" name="" id="checkAllBox" >全选或全不选
			<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="btn1" value="全选">
			<input type="button" id="btn2" value="全不选">
			<input type="button" id="btn3" value="反选">
			<input type="submit" id="sendbtn" value="提交">
		</form>
	</body>
</html>