使用javascript实现全选和全不选onclick()点击事件和getElementsByName()返回带有指定name名称的对象集合函数
技术分析
- 确定事件onclick()点击事件。
- 还有就是document.getElementsByName()方法,根据name名称获取所有元素。
代码步骤
- 首先确定事件为onclick()事件,并为其绑定一个函数。
- 书写该函数
首先获取复选框的状态
在获取下面所有复选框元素
在判断该复选框是否选中
选中 循环,把下面的所有复选框设置为选中
没选中 循环,把下面的所有复选框设置为不选中
代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用javascript实现高亮</title>
<script type="text/javascript">
//确定一个事件onclick
function checkSelected(){
//获取复选框的状态
var selEle = document.getElementById("checktext").checked;
//获取其他复选框
var cheEle = document.getElementsByName("checkOne");
if(selEle==true){
//如果是选中,循环其他复选框设置为选中
for(var i=0;i<cheEle.length;i++){
cheEle[i].checked=true;
}
}else{
//如果是不选中,循环其他复选框设置为不选中
for(var i=0;i<cheEle.length;i++){
cheEle[i].checked=false;
}
}
}
</script>
</head>
<body>
<table border="1px" width="500px" height="300px" align="center">
<thead>
<tr >
<td colspan="4">
<input type="button" value="全选" />
</td>
</tr>
<tr align="center">
<td>
<input type="checkbox" id="checktext" onclick="checkSelected()"/>
</td>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr id="tr1" align="center">
<td>
<input type="checkbox" name="checkOne" />
</td>
<td>1</td>
<td>小明</td>
<td>20</td>
</tr>
<tr id="tr2" align="center">
<td>
<input type="checkbox" name="checkOne"/>
</td>
<td>2</td>
<td>小李</td>
<td>21</td>
</tr>
<tr id="tr3" align="center">
<td>
<input type="checkbox" name="checkOne"/>
</td>
<td>3</td>
<td>小孙</td>
<td>33</td>
</tr>
<tr id="tr4" align="center">
<td>
<input type="checkbox" name="checkOne"/>
</td>
<td>4</td>
<td>小凤</td>
<td>23</td>
</tr>
<tr id="tr5" align="center">
<td>
<input type="checkbox" name="checkOne"/>
</td>
<td>5</td>
<td>小肖</td>
<td>26</td>
</tr>
<tr id="tr6" align="center">
<td>
<input type="checkbox" name="checkOne"/>
</td>
<td>6</td>
<td>小绿</td>
<td>27</td>
</tr>
</tbody>
</table>
</body>
</html>
页面效果展示
