<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
padding: 100px 150px;
}
</style>
<script src="../1.10.2.jquery.min.js"></script>
</head>
<body>
<input type="button" value="全选" id="quanxuan" />
<input type="button" value="反选" id="fanxuan" />
<input type="button" value="全不选" id="quanbuxuan" />
<br />
<br />
<br />
<ul id="articles">
<li><input type="checkbox" />春夏秋冬</li>
<li><input type="checkbox" />春夏秋冬</li>
<li><input type="checkbox" />春夏秋冬</li>
<li><input type="checkbox" />春夏秋冬</li>
<li><input type="checkbox" />春夏秋冬</li>
<li><input type="checkbox" />春夏秋冬</li>
<li><input type="checkbox" />春夏秋冬</li>
<li><input type="checkbox" />春夏秋冬</li>
</ul>
</body>
<script>
//全选
$("#quanxuan").click(function(){
$("#articles :checkbox").attr('checked','checked');
$("#articles :checkbox").prop('checked',true);
})
//全不选
$("#quanbuxuan").click(function(){
$("#articles :checkbox").removeAttr('checked');
$("#articles :checkbox").removeProp('checked');
})
// 反选
$("#fanxuan").click(function(){
// 获得现在处在选中状态的元素
var obj=$("#articles :checked");
// 全选
$("#articles :checkbox").attr('checked','checked');
$("#articles :checkbox").prop('checked',true);
// 让刚才记录下来的元素取消选择
obj.removeAttr('checked');
obj.removeProp('checked');
})
</script>
</html>
全选，反选，全不选
猜你喜欢
转载自www.cnblogs.com/gxywb/p/9429453.html
今日推荐
周排行