jquery之表单的全选和反选
效果如下：
要求：点击上边的多选按钮，下边的多选按钮和上边的一致，点击下边的多选按钮，判断所有的多选按钮是否全部被选定，只有全部被选定，上边的才选定
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.wrap{
width: 355px;
border:1px solid pink;
margin: 100px auto;
}
table{
border-collapse: collapse;
border-spacing: 0;
border:1px solid pink;
font-family: "微软雅黑";
text-align: center;
}
th,td{
border:1px solid #fff;
}
th{
background: pink;
color: #fff;
font-size: 16px;
padding: 10px 35px;
}
tbody tr{
background: #E9E7E7;
}
tbody tr:hover{
background: #9ED9F2;
color: #fff;
cursor: pointer;
}
</style>
<script type="text/javascript" src="../scripts/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(function(){
//需求1：点击上面的多选按钮，下面的所有的多选按钮都和上面的一致
//需求2：点击下面的多选按钮，判断下面的所有多选按钮都是否全部被选定，只有全部被选定，上边的才被选定
//需求1：点击上面的多选按钮，下面的所有的多选按钮都和上面的一致
//步骤：绑定事件，直接让下面的所有按钮和上面的按钮属性值一模一样
$("#j_ckAll").click(function(){
//直接让下面的所有按钮和上面的按钮属性值一模一样
$("#j_tb input:checkbox").prop("checked",$(this).prop("checked"));
})
//需求2：点击下面的多选按钮，判断下面的所有多选按钮都是否全部被选定，只有全部被选定，上边的才被选定
$("#j_tb input:checkbox").click(function(){
//判断只有下面的都被选定，上面的才被选定
//技术点：带有checked属性和CheckBox一样多的时候
if ($("#j_tb input:checkbox").length === $("#j_tb input:checked").length) {
//只有所有的checkbox都有checked属性，上面的才被选中
$("#j_ckAll").prop("checked",true);
}else{
$("#j_ckAll").prop("checked",false);
}
})
})
</script>
</head>
<body>
<div class="wrap">
<table>
<thead>
<tr>
<th><input type="checkbox" id="j_ckAll"></th>
<th>课程名称</th>
<th>所属学院</th>
</tr>
</thead>
<tbody id="j_tb">
<tr>
<td><input type="checkbox"/></td>
<td>javascript</td>
<td>传智播客</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>Css</td>
<td>传智播客</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>html</td>
<td>传智播客</td>
</tr>
</tbody>
</table>
</div><!--wrap结束-->
</body>
</html>
