jQuery实现全选和反选功能
- 核心代码
- attr() 与 prop() 区别
- 全部代码
核心代码
<script>
$(function(){
var $selectAll = $("#selectAll");
var $unSelectAll = $("#unSelectAll");
var $selectRev = $("#selectRev");
//全选
$selectAll.click(function(){
let $checkbokes = $("table input[type='checkbox']");
$checkbokes.prop("checked",true);
})
//全不选
$unSelectAll.click(function(){
let $checkbokes = $("table input[type='checkbox']");
$checkbokes.prop("checked",false);
// $checkbokes.attr("checked",false);
})
//反选
$selectRev.click(function(){
let checked = $("table input[type='checkbox']:checked");
let nochecked = $("table input[type='checkbox']:not(:checked)");
nochecked.prop("checked",true)
checked.prop("checked",false);
})
})
</script>
attr() 与 prop() 区别
用attr()函数实现checked属性的设置在没有人为点击方框时是能用的,但是当某个复选框被选中时,无论全不选,反选对这个框都失效了.
勾选编号1复选框:
点击反选,控制台显示的是编号1和编号2的标签,可以看到没有checked属性,而编号2的有checked属性
再次点击反选,编号2的checked属性被清除了,而编号1没有反应,但是复选框还是勾选状态
attr函数操作的是人为添加的属性,不是原本标签包含的属性,而checked这种原生属性最好使用prop函数进行操作.
全部代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格全选</title>
<style>
table {
border: 1px solid;
width: 500px;
margin-left: 30%;
}
td,
th {
text-align: center;
border: 1px solid;
}
div {
margin-top: 10px;
margin-left: 30%;
}
.out {
background-color: white;
}
.over {
background-color: pink;
}
</style>
<script src="../js/jquery-3.4.1.min.js"></script>
<script>
$(function(){
var $selectAll = $("#selectAll");
var $unSelectAll = $("#unSelectAll");
var $selectRev = $("#selectRev");
$selectAll.click(function(){
let $checkbokes = $("table input[type='checkbox']");
$checkbokes.prop("checked",true);
})
$unSelectAll.click(function(){
let $checkbokes = $("table input[type='checkbox']");
$checkbokes.prop("checked",false);
// $checkbokes.attr("checked",false);
})
$selectRev.click(function(){
let checked = $("table input[type='checkbox']:checked");
let nochecked = $("table input[type='checkbox']:not(:checked)");
nochecked.prop("checked",true)
checked.prop("checked",false);
})
})
</script>
</head>
<body>
<table>
<caption>学生信息表</caption>
<tr>
<th><input type="checkbox" name="cb" id="firstCb" class="aa"></th>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>操作</th>
</tr>
<tr>
<td><input type="checkbox" name="cb"></td>
<td>1</td>
<td>令狐冲</td>
<td>男</td>
<td><a href="javascript:void(0) " onclick="delTr(this);">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" name="cb"></td>
<td>2</td>
<td>任我行</td>
<td>男</td>
<td><a href="javascript:void(0) " onclick="delTr(this);">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" name="cb"></td>
<td>3</td>
<td>岳不群</td>
<td>?</td>
<td><a href="javascript:void(0) " onclick="delTr(this);">删除</a></td>
</tr>
</table>
<div>
<input type="button" id="selectAll" value="全选">
<input type="button" id="unSelectAll" value="全不选">
<input type="button" id="selectRev" value="反选">
</div>
</body>
</html>
