jQuery 实现简单全选、全不选、反选

最新推荐文章于 2022-01-06 18:42:02 发布

原创最新推荐文章于 2022-01-06 18:42:02 发布 · 2.2k 阅读

1 ·

CC 4.0 BY-SA版权

jQuery 专栏收录该内容

10 篇文章

订阅专栏

jQuery 实现简单全选、全不选、反选

<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<title>全选、全不选、反选</title>
	<style>
	</style>
</head>
<body>
	<div id="checkbox">
		<input type="checkbox">吃
		<input type="checkbox">喝
		<input type="checkbox">玩
		<input type="checkbox">乐
	</div>
	<div id="btn">
		<input type="button">全选
		<input type="button">全不选
		<input type="button">反选
	</div>


<script src="http://libs.baidu.com/jquery/1.7.0/jquery.js"></script>
<script>
	var checkAll = $('#btn>input').eq(0);
	var checkNone = $('#btn>input').eq(1);
	var checkReverse = $('#btn>input').eq(2);
	var checkbox = $('#checkbox>:checkbox');

	checkAll.click(function(){
		checkbox.attr('checked',true)
	})
	checkNone.click(function(){
		checkbox.attr('checked',false)
	})
	checkReverse.click(function(){
		checkbox.each(function(){
			$(this).attr('checked',!$(this).attr('checked'));
		});
	});
</script>
</body>
</html>

.....................................