先看界面,以及要实现的功能:
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/8902dff434cfa13693678c4bcfd20135.png)
需求:
全选状态:全部选中。取消全选全部取消。
点击删除按钮,删除相应勾选的记录。
在全选状态中删除全部后,删除完要取消全选。
思路:
获取到每个选项框的状态,根据选项框的状态来判断是否删除。
全选的话;获取了每个选项框对象,存到一个数组变量中,遍历设置"checked"值。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
<script type="text/javascript">
$(function() {
//通过选择器的合理运用,可以获取到复选框对象;
//#1 父类、td:first-child 第一个td子标签、 input 子类;
var checks = [$("#1 td:first-child input"), $("#2 td:first-child input"), $("#3 td:first-child input")];
//单个点击时
$.toChecked(checks);
//全选
$.toChkAll(checks);
//删除
$.toDel(checks);
})
//删除
$.toDel = function(checks){
$("#btnDel").click(function(){
//点击删除按钮之后,将被选中的一行记录移除。需要获取到父类的父类;
$(checks).each(function(){
if($(this).attr("checked")=="checked"){
$(this).parent().parent().remove();
}
//删除完之后,取消全选状态。
$("#chkAll").removeAttr("checked");
})
})
}
//全选
$.toChkAll = function(checks) {
//开关变量
var isChecked = false;
$("#chkAll").click(function() {
//点击全选后,根据开关变量的值,执行相应的遍历语句。变成全选或者全不选;
if(isChecked) {
$(checks).each(function() {
$(this).removeAttr("checked");
})
}else {
$(checks).each(function() {
$(this).attr("checked", "checked");
})
}
isChecked = !isChecked;
})
}
//单个
$.toChecked = function(checks) {
var isChecked = false;
$(checks).each(function() {
this.click(function() {
if(isChecked) {
$(this).removeAttr("checked");
}
isChecked = !isChecked;
})
})
}
</script>
</head>
<body>
<table border="1" align="center">
<tr>
<th>选项</th>
<th>编号</th>
<th>昵称</th>
<th>种族</th>
</tr>
<tr id="1">
<td><input type="checkbox" value="1" /></td>
<td>007</td>
<td>亚托克斯</td>
<td>恶魔</td>
</tr>
<tr id="2">
<td><input type="checkbox" value="2" /></td>
<td>001</td>
<td>亚索</td>
<td>浪人</td>
</tr>
<tr id="3">
<td><input type="checkbox" value="3" /></td>
<td>008</td>
<td>赫卡里姆</td>
<td>人马</td>
</tr>
<tr>
<td colspan="4">
<span><input id="chkAll" type="checkbox" />全选</span>
<span><input id="btnDel" type="button" value="删除"/></span>
</td>
</tr>
</table>
</body>
</html>