使用JS完成全选和选不选操作
确定事件(鼠标单击事件onclick)，事件绑定到编号前面的复选框里面
获取编号前面的复选框的状态(是否选中)
获取复选框：var checkAllEle = document.getElementById(“id”)
获取复选框的状态：checkAllEle.checked?
获取下面所有的复选框：
document.getElementsByName(“name”);
步骤分析
第一步：确定事件(onclick)并为其绑定一个函数
第二步：书写函数(获取编号前面的复选框，获取其状态)
第三步：判断编号前面复选框的状态(如果为选中，获取下面所有的复选框，并将其状态置为选中)
第四步：判断编号前面复选框的状态(如果为未选中，获取下面所有的复选框，并将其状态置为未选中)
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>用js实现全选和全部选</title>
<link rel="stylesheet" href="">
<script type="text/javascript">
//1.确定事件：onclick;
function check(){
//2.获得复选框的id
var check = document.getElementById('check1');
//3.获得check1下面的name
var checknames = document.getElementsByName('checkname');
//4.判断check1有没有勾选
if(check.checked==true){
//5.遍历checknames数组
for (var i = 0;i<checknames.length; i++) {
checknames[i].checked = true;
}
}
//6.判断check1有没有勾选
if(check.checked==false){
//7.遍历checknames数组
for (var i = 0;i<checknames.length; i++) {
checknames[i].checked = false;
}
}
}
</script>
</head>
<body>
<table border="1" width="500" height="50" align="center" >
<thead>
<tr>
<td colspan="4">
<input type="button" value="添加" />
<input type="button" value="删除" />
</td>
</tr>
<tr>
<th><input type="checkbox" onclick="check()" id="check1" /></th>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr >
<td><input type="checkbox" name="checkname"/></td>
<td>1</td>
<td>张三</td>
<td>22</td>
</tr>
<tr >
<td><input type="checkbox" name="checkname"/></td>
<td>2</td>
<td>李四</td>
<td>25</td>
</tr>
<tr >
<td><input type="checkbox" name="checkname"/></td>
<td>3</td>
<td>王五</td>
<td>27</td>
</tr>
<tr >
<td><input type="checkbox" name="checkname"/></td>
<td>4</td>
<td>赵六</td>
<td>29</td>
</tr>
<tr >
<td><input type="checkbox" name="checkname"/></td>
<td>5</td>
<td>田七</td>
<td>30</td>
</tr>
<tr >
<td><input type="checkbox" name="checkname"/></td>
<td>6</td>
<td>汾九</td>
<td>20</td>
</tr>
</tbody>
</table>
</body>
</html>结果
1315
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
