* {
padding: 0;
margin: 0;
}
.wrap {
width: 300px;
margin: 100px auto 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
width: 300px;
}
th,
td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}
th {
background-color: #09c;
font: bold 16px "微软雅黑";
color: #fff;
}
td {
font: 14px "微软雅黑";
}
td:nth-of-type(1) {
text-align: center;
}
tbody tr,
tfoot tr {
background-color: #f0f0f0;
}
tbody tr:hover {
cursor: pointer;
background-color: #fafafa;
}
button {
width: 50px;
}
<div class="wrap">
<table>
<thead>
<tr>
<th>
<input type="checkbox" id="j_cbAll" />
<span id="txt">全选</span>
</th>
<th>米粉</th>
<th>故乡</th>
</tr>
</thead>
<tbody id="j_tb">
<tr>
<td>
<input type="checkbox" />
</td>
<td>桂林米粉</td>
<td>桂林</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>螺蛳粉</td>
<td>柳州</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>过桥米线</td>
<td>云南</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>南昌拌粉</td>
<td>江西</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>常德米粉</td>
<td>湖南常德</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5"><button id="rev">反选</button></td>
</tr>
</tfoot>
</table>
</div>
//通用js代码
//通过id名获取元素
function getId(id){
return document.getElementById(id);
}
//通过父级id名获取父级下的元素
function getEle(pId,tagName){
return getId(pId).document.getElementsByTagName(tagName);
}
//需求:1.全选功能
// 2.反选功能--反向操作全选框
// 3.反选按钮--列表选框取反(同时符合全选逻辑)
//1.实现全选功能
// 1.1获取全选按钮与span标签
var cbAll = getId("j_cbAll"),
txt = getId("txt"),
cks = getEle("j_tb", "input");
cbAll.onclick = function () {
for (var i = 0; i < cks.length; i++) {
cks[i].checked = this.checked;
}
txt.innerText = this.checked ? "全不选" : "全选";
}
// 2反选功能实现
// 2.1循环遍历checkbox复选框
for (var i = 0; i < cks.length; i++) {
cks[i].onclick = getOption;
}
// 3.反选按钮--列表选框取反(同时符合全选逻辑)
getId("rev").onclick = function () {
for (var i = 0; i < cks.length; i++) {
cks[i].checked = !cks[i].checked;
}
getOption();
}
// 封装一个函数
function getOption() {
var flag = true; //默认情况下,全选按钮为全选中状态(不是直接显示在页面上的默认状态)
// 循环遍历每一个列表前的复选框状态
for (var j = 0; j < cks.length; j++) {
// 只要有一个没有被选中的话全选框就不被选中,故找到一个没有被选中的复选框就不再查询
if (!cks[j].checked) {
flag = false;
break;
}
}
cbAll.checked = flag;
txt.innerText = cbAll.checked ? "全不选" : "全选";
}