黑马程序员——Jquery的全选与反选

时间:2022-12-08 21:20:32

———Java培训、Android培训、iOS培训、.Net培训、期待与您交流! ———
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
</head>
</style>
<script src="/js/jquery-1.8.3.js" type="text/javascript"></script>
<script>
$(function(){
$("#all").click(function(){
// alert($(this).prop("checked"));
if($(this).prop("checked")){
//选中
$("input[type='checkbox']").prop("checked",true);
$(this).next("span").html("全取消");
}else{
$("input[type='checkbox']").prop("checked",false);
$(this).next("span").html("全选");
}

});
$("#reset").click(function(){
//获得所有选中的
var a=$("input[type='checkbox']:not(#all):checked");
// alert(a.length);
//获得没有选中的
var b=$("input[type='checkbox']:not(#all):not(:checked)")
// alert(b.length);
a.prop("checked",false);
b.prop("checked",true);

});

});

</script>
<body>
<input type="checkbox" /><input type="checkbox" /><input type="checkbox" /><input type="checkbox" />
<input type="checkbox" /><input type="checkbox" /></br>
<input type="checkbox" id="all"/><span>全选</span> <input type="button"value="反选" id="reset"/>
</body>
</html>