核心提示：DOM与JQ(全选与反选)全选和反选!DOCTYPE htmlhtmlhead lang=enmeta charset=UTF-8title/titlestyle* {patding: 0;margi...
DOM与JQ(全选与反选)
全选和反选
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
patding: 0;
margin: 0;
}
.wrap {
width: 300px;
margin: 100px auto 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
width: 300px;
}
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>
</head>
<body>
<p class="wrap">
<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>红烧肉</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>
</table>
</p>
<script>
var all =document.getElementById("j_cbAll");
var tb =document.getElementById("j_tb");
var checkbox =tb.getElementsByTagName("input")
all.onclick =function () {
for (var i = 0; i < checkbox.length; i++) {
checkbox[i].checked = all.checked
}
};
for (var i = 0; i < checkbox.length; i++) {
checkbox[i].onclick = function () {
var isAllcheck = true
for (var i = 0; i < checkbox.length; i++) {
if (checkbox[i].checked !== true) {
isAllcheck = false //判断如果没有选中，就其全选为false,跳出循环，直到全部被选中就等于全选框
break;
}
};
all.checked = isAllcheck
}
}
</script>
</body>
</html>
以上是DOM操作全选和反选
JQ的全选和反选
<script src="jquery-1.12.2.js" ></script>
<script>
$(function () {
$("#j_cbAll") .on("click",function () {
var eck=$(this).prop("checked")
$("#j_tb").find(":checkbox").prop("checked","eck")
});
$("#j_tb").find(":checkbox").on("click",function () {
var length1=$("#j_tb").find(":checkbox").length //获取所有复选框的个数
var length2=$("#j_tb").find(":checked").length //获取所有被选中的个数
if(length1==length2) { //判断是否被选中的个数是否等于当前所有选项框的个数
$("#j_cbAll").prop("checked",true)
}
else {
$("#j_cbAll").prop("checked",false)
}
});
});
</script>
总结：js ; 先假设条件被选中，其判断里面所有是否被选中
JQ：判断是否被选中的个数是否等于当前所有选项框的个数，然后根据判断的结果执行全选的
JQ：获取本身元素固有的属性方法prop()
prop():操作元素状态属性,参数1属性名,参数2属性值
添加自定义属性atttr()
$("#j_tb").find(":checkbox") :表示获取所有type为checkbox的input标签
$("#j_tb").find(":checked"):表示获取tbody中所有checked状态为true的input标签
find()针对当前元素找里面的一些其他元素
