jquery 爱好选择

a_gust_wind

于 2021-07-03 21:02:59 发布

阅读量73

点赞数

分类专栏： jquery 文章标签： jquery

本文链接：https://blog.csdn.net/a_gust_wind/article/details/118445089

版权

jquery 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			form{
				width: 400px;
				margin: 50px auto;
			}
		</style>
	</head>
	<body>
		<form action="" method="post">
			你爱好的运动是?<input type="checkbox" id="checkedAll"  />全选/全不选
			<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="羽毛球" />羽毛球
			<input type="checkbox" name="items" value="乒乓球" />乒乓球
			<br>
			<input type="button" id="checkedAllBtn" value="全选" />
			<input type="button" id="checkedNoBtn" value="全不选" />
			<input type="button" id="invertBtn" value="反选" />
			<input type="button" id="submit" value="提交" />
		</form>
	</body>
</html>
<script src="jquery-2.0.3.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	let checkedAll = $('#checkedAll');
	let items = $(':input[name=items]');
	$('#checkedAllBtn').click(function(){
		items.prop('checked',true);
		checkedAll.prop('checked',true);
	});
	$('#checkedNoBtn').click(function(){
		items.prop('checked',false);
		checkedAll.prop('checked',false);
	})
	$('#invertBtn').click(function(){
		
		items.each(function(){
			this.checked = !this.checked
		});
		let length = items.filter(':checked').length;
		checkedAll.prop('checked',length==5);
	})
	items.click(function(){
		let length = items.filter(':checked').length;
		checkedAll.prop('checked',length==5);
		
	})
	$('#submit').click(function(){
		items.filter(':checked').each(function(){
			let a = this.value;
			console.log(a)
		})
	});
	checkedAll.click(function(){
		items.prop('checked',this.checked)
	})
</script>