又是再见?

web前端

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

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>
.....................................

阅读更多
版权声明:转载需注明出处 https://blog.csdn.net/byc233518/article/details/46799035
个人分类: jQuery
上一篇jQuery 选择器/筛选
下一篇H5新表单属性
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭