<!--1. 需求分析:-->
<!--在后台实现一个批量删除操作, 前台需要全选所有的复选框-->
<!--2. 技术分析:-->
<!--1). 确认事件:鼠标单击事件onclick,绑定事件的位置;-->
<!--2). 获取编号前面的复选框的状态(是否选中)-->
<!--获取复选框: var checkAllEle = document.getElementById("id");-->
<!--获取复选框的状态: checkAllEle.checked-->
<!--3). 获取下面的所有复选框:-->
<!--document.getElementByName("name")-->
<!--3. 步骤实现:-->
<!--1). 确认事件:鼠标单击事件onclick,并对其绑定一个函数;-->
<!--2). 书写函数(书写编号前面的复选框， 获取其状态)-->
<!--3). 判断编号前面复选框的状态-->
<!--4). 如果未选中, 获取下面所有的复选框， 并将其状态置为选中;-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>#[{09-实现全选和全不选操作}]#</title>
<script>
function selectAll() {
//获取学号前面的复选框
var checkAllEle=document.getElementById('selectAll');
//根据名称获取下面所有的复选框
var checkones=document.getElementsByName('checkone');
//判断复选框的状态（对象.checked：如果返回值为ture，则表示已经选中，反之未选中）
if (checkAllEle.checked){
//如果被选中，通过循环依次改变复选框的状态
for (var i =0;i<checkones.length;i++){
//拿到每一个复选框并将其设为选中状态
checkones[i].checked=true;
}
}else{
//如果没有被选中，通过循环依次改变复选框的状态
for (var i=0;i<checkones.length;i++){
//拿到每一个复选框并将其设为未选中
checkones[i].checked=false;
}
}
}
</script>
</head>
<body>
<h1 align="center">学生信息</h1>
<!--创建一个6行4列的表格-->
<table border="1" align="center" width="50%" cellpadding="10">
<tr>
<td colspan="4" align="center" >
<input type="button" value="添加">
<input type="button" value="删除">
</td>
</tr>
<tr>
<!--确定事件：onclick 并且绑定函数-->
<td><input type="checkbox" onclick="selectAll()" id="selectAll"></td>
<th>学号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>
<input type="checkbox" name="checkone"></td>
<td>001</td>
<td>lance</td>
<td>20</td>
</tr>
<tr>
<td><input type="checkbox" name="checkone"></td>
<td>002</td>
<td>Axis</td>
<td>21</td>
</tr>
<tr>
<td><input type="checkbox" name="checkone"></td>
<td>003</td>
<td>joy</td>
<td>22</td>
</tr>
<tr>
<td><input type="checkbox" name="checkone"></td>
<td>004</td>
<td>helen</td>
<td>18</td>
</tr>
</table>
</body>
</html>
