<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery.min.js" ></script>
<style>
body{
font-family: "微软雅黑";
font-size: 14px;
}
.t_table{
border-collapse:collapse;
}
.t_head{
text-align: center;
height:40px;
line-height: 40px;
}
.t_head th{
width:200px;
border:1px solid #d7d7d7;
}
.tbody{
height: 40px;
line-height: 40px;
text-align: center;
}
.tbody td{
border:1px solid #d7d7d7;
}
</style>
</head>
<body>
<table class="t_table">
<tr class="t_head">
<th><input type="checkbox" class="all"/></th><th>学号</th><th>姓名</th><th>年龄</th><th>增加</th>
</tr>
<tr class="tbody">
<td><input type="checkbox"/></td><td id="1" class="aaa">1</td><td>张三</td><td>19</td><td>增加</td>
</tr>
<tr class="tbody">
<td><input type="checkbox"/></td><td id="2" class="aaa">2</td><td>小磊</td><td>20</td><td>增加</td>
</tr>
<tr class="tbody">
<td><input type="checkbox"/></td><td id="3" class="aaa">3</td><td>小月</td><td>21</td><td>增加</td>
</tr>
<tr class="tbody">
<td><input type="checkbox"/></td><td id="4" class="aaa">4</td><td>小张</td><td>20</td><td>增加</td>
</tr>
<tr class="tbody">
<td><input type="checkbox"/></td><td id="5" class="aaa">5</td><td>小李</td><td>20</td><td>增加</td>
</tr>
<tr class="tbody">
<td><input type="checkbox"/></td><td id="6" class="aaa">6</td><td>小王</td><td>21</td><td>增加</td>
</tr>
<tr class="tbody">
<td><input type="checkbox"/></td><td id="7" class="aaa">7</td><td>小丽</td><td>22</td><td>增加</td>
</tr>
<tr class="tbody">
<td><input type="checkbox"/></td><td id="8" class="aaa">8</td><td>小红</td><td>19</td><td>增加</td>
</tr>
<tr class="tbody">
<td><input type="checkbox"/></td><td id="9" class="aaa">9</td><td>小明</td><td>18</td><td>增加</td>
</tr>
<tr class="tbody">
<td><input type="checkbox"/></td><td id="10" class="aaa">10</td><td>小海</td><td>20</td><td>增加</td>
</tr>
</table>
<script>
$(function(){
var selectArr = [],
len = $(".tbody").length;
$(".all").click(function(){
if(this.checked){
$(".tbody").each(function(i,item){
//$(".tbody").eq(i).find(":checkbox").attr("checked", true); is_ok
//$(item).find(":checkbox").attr("checked", true); is_ok
$(this).find(":checkbox").prop("checked", true);
var this_id = $(this).find(".aaa").attr("id");
var index = selectArr.indexOf(this_id);
if(index == -1){
selectArr.push(this_id);
}
})
}else{
$(".tbody input:checkbox").prop("checked", false);
selectArr = [];
}
console.log(selectArr);
});
$(".tbody").click(function(){
var isSelected = $(this).find(":checkbox").prop("checked"),
this_id = $(this).find(".aaa").attr("id"),
index = selectArr.indexOf(this_id);
if(isSelected){
if(index == -1){
selectArr.push(this_id);
}
}else{
if(index > -1){
selectArr.splice(index,1);
}
}
if(len === selectArr.length){
$(".all").prop("checked",true);
}else{
$(".all").prop("checked",false);
}
console.log(selectArr);
})
})
</script>
</body>
</html>
jquery中方法$.prop与$.attr方法有些许不同。prop用在固有html的属性时，而attr通常用在我们自定义的属性的时候。
所以区别在这里：
<input id="chk1" type="checkbox" /> 没有checked属性的多选框 <input id="chk2" type="checkbox" checked="true" />有checked属性的多选框
prop方法结果如下：
$("#chk1").prop("checked") == false
$("#chk2").prop("checked") == true
attr方法结果如下：
$("#chk1").attr("checked") == undefined
$("#chk2").attr("checked") == "true"
也考虑到分页中，最后一页选项并不是10条选项的表格列表
时间： 2025-01-04 21:48:10