一、功能实现
当点击全选按钮,所有的复选框被选中,有一个复选框没被选中时,全选按钮就不会被选中。效果如图:
二、分析
1.JavaScript实现
① 当点击全选按钮时,所有复选框被选中
② 遍历每一个复选框,添加点击事件,按钮有两种状态,引入两个变量
var flag = true;
③ 遍历每一个复选框,只要有一个没被选中,状态为false,退出循环
④ 所有的复选框都被选中时,全选按钮状态为 true
2.jQuery实现
① 全选按钮点击事件,复选框的状态和全选按钮一致
② 判断被选择的复选框和复选框的长度是否一致,一致表示所有的都被选择了,则全选按钮被选择。反之,全选按钮不被选择。
三、代码
html部分
<table>
<thead>
<tr>
<th>
<input type="checkbox" id="j_cbAll" />
</th>
<th>商品</th>
<th>价钱</th>
</tr>
</thead>
<tbody id="j_tb">
<tr>
<td>
<input type="checkbox" />
</td>
<td>iPhone8</td>
<td>8000</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>iPad Pro</td>
<td>5000</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>iPad Air</td>
<td>2000</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>Apple Watch</td>
<td>2000</td>
</tr>
</tbody>
</table>
css部分
<style>
* {
padding: 0;
margin: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
width: 300px;
margin: 100px auto;
}
th,
td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}
th {
background-color: #09c;
font: bold 16px "微软雅黑";
color: #fff;
}
td {
font: 14px "微软雅黑";
}
tbody tr {
background-color: #f0f0f0;
}
tbody tr:hover {
/* 改变鼠标样式 */
cursor: pointer;
background-color: #fafafa;
}
</style>
JavaScript部分
<script>
//全选按钮
var j_cbAll = document.querySelector('#j_cbAll');
var j_tbs = document.querySelector('#j_tb').querySelectorAll('input');
j_cbAll.onclick = function() {
//查看按钮状态
// console.log(this.chrcked);
for(var i = 0; i < j_tbs.length; i++) {
j_tbs[i].checked = this.checked;
}
}
//下面的复选框全部选中 上面的全选按钮才能选中
//每次点击 就要循环查看一遍 四个复选框的选定状态
for(var i = 0; i < j_tbs.length; i++) {
//外层循环是给四个复选框添加点击事件
j_tbs[i].onclick = function() {
var flag = true;
for(var i = 0; i < j_tbs.length; i++) {
//判断四个复选框的选定状态
//按钮的选中状态一共有两个 引入两个变量
if(!j_tbs[i].checked) {
//四个复选框有一个没被选中 决定全选按钮的选定状态
flag = false;
//四个复选框有一个没被选中都会退出循环
break;
}
}
j_cbAll.checked = flag;
}
}
</script>
jQuery部分
<script src="jquery-1.11.1.js"></script>
<script>
$(function() {
$("#j_cbAll").click(function() {
//复选框的所有按钮和全选按钮状态一致
$("tbody input").prop("checked",$(this).prop("checked"));
})
$("tbody input").click(function() {
// 判断所有tbody中的input个数如果和勾选了的input个数相等的话代表全部都勾选了,就让全选按钮勾选上,否则取消全选按钮勾选
if($("tbody input").length === $("tbody input:checked").length) {
$("#j_cbAll").prop("checked",true);
}
else {
$("#j_cbAll").prop("checked",false);
}
})
})
</script>
四、总结
jQuery比JavaScript省去了遍历的部分,代码精简了很多。实现功能的主要难度在于想到合适的方法,有了合适的方法,代码写起来不会很复杂。
两种状态:flag flag flag flag!!!!!!!!!!