Jquery 实现全选全不选功能

来源:互联网 发布:淘宝专享打折怎么设置 编辑:程序博客网 时间:2024/04/25 10:09
<!DOCTYPE html>
<html>


<head>
<meta charset="UTF-8">
<title>attr</title>
<script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
</head>


<body>
<form action="" method="post">


<p>爱好选择</p>
<p>
<lable>
<input type="checkbox" />篮球
</lable>
</p>
<p>
<lable>
<input type="checkbox" />足球
</lable>
</p>
<p>
<lable>
<input type="checkbox" />乒乓球
</lable>
</p>
<p>
<lable>
<input type="checkbox" />游泳
</lable>
</p>
<p>
<lable>
<input type="checkbox" />羽毛球
</lable>
</p>
</form>
<p>
<button id="all">全选</button>
<button id="notall">全不选</button>
<button id="unall">反选</button>
<button id="ok">ok</button>
</p>
<hr />
<div class="info">

</div>
</body>
<script type="text/javascript">
$("#all").click(function(){
$(":checkbox").attr({'checked':true});
});
$("#notall").click(function(){
$(":checkbox").attr({'checked':false});
});
$("#unall").click(function(){
$(":checkbox").each(function(){
this.checked=!this.checked;
});
});
$("#ok").click(function(){
$(":checked").parent().parent().appendTo(".info");
})
</script>
</html>
原创粉丝点击