check_box复选框单击事件无法让新添加的表行的复选框跟着变化?
写了一个html页面,想要实现点击左上角复选框后所有复选框跟着打勾,再点击所有复选框跟着取消打勾;
在script标签内,利用document.getElementById获取了左上角checkbox复选框的对象,并调用了onClick = function(){方法体},方法体获取了所有的checkbox对象,对象.checked=this.checked;
结果打开浏览器,只要一添加表行,点击左上角checkbox复选框就会不起作用:
随后我把方法注释掉,将点击事件onclick定义在checkbox复选框所在的input标签才解决问题
成功了!就是内部一些原理还是搞不懂,请大家不吝赐教!
以下是源码可以看下,如果能指导一下就更好了!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>学生信息表</title>
<!-- 需求:制作一个学生信息表,可以添加删除学生数据,可以提交选中数据。-->
<style>
table{
border: 1px solid black;
width: 600px;
text-align: center;
margin-left: 30%;
}
th,td{
border: 1px solid black;
}
#div_1{
margin-left: 20%;
margin-bottom: 30px;
}
#div_2{
margin-left: 30%;
margin-top: 30px;
}
#btn_add{
border: 0px;
width: 70px;
height: 30px;
background-color:pink;
}
#btn_sub{
border: 0px;
width: 90px;
height: 35px;
margin-left: 40px;
background-color:gold;
}
</style>
</head>
<body>
<div id="div_1">
<input type="text" id="text_id" placeholder="请输入学生编号">
<input type="text" id="text_name" placeholder="请输入学生姓名">
<input type="radio" name="gender" id="male" value="mela">男
<input type="radio" name="gender" id="female" value="femela">女
<input type="text" id="text_score" placeholder="请输入学生成绩">
<input type="button" id="btn_add" value="添加">
</div>
<form action="#" method="get">
<table id="table">
<caption>学生成绩表</caption>
<tr>
<td><input type="checkbox" name="cb" id="cb_first" onclick="selectAllCB(this);"></td>
<th>编号</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>20</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>22</td>
<td><a href="javascript:void(0);"οnclick="delTr(this);">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" name="cb" ></td>
<td>3</td>
<td>派大星</td>
<td>男</td>
<td>5</td>
<td><a href="javascript:void(0);"οnclick="delTr(this);">删除</a></td>
</tr>
</table>
<div id="div_2">
<input type="button" id="btn_selectAll" value="全选">
<input type="button" id="btn_noSelect" value="全不选">
<input type="button" id="btn_rev" value="反选">
<input type="submit" id="btn_sub" value="提交表单">
</div>
</form>
<script>
/*
想要实现的功能:
* 1.添加功能
* 2.删除功能
* 3.全选功能
* 3.1点击左上角复选框实现全选或全不选
*
* 4.全不选功能
* 5.反选功能
* 6.鼠标移动变色功能
* 7.定义方法表单校检(编号不能为空重复、成绩不能为空)
* 8.提交表单功能(校验成功才能提交)
* */
//1.添加功能
document.getElementById("btn_add").onclick = function () {
var id = document.getElementById("text_id").value;
var name = document.getElementById("text_name").value;
var gender = document.getElementsByName("gender").value;
var score = document.getElementById("text_score").value;
var table = document.getElementById("table");
table.innerHTML += "<tr>\n" +
" <td><input type=\"checkbox\" name=\"cb\" ></td>\n" +
" <td>" + id + "</td>\n" +
" <td>" + name + "</td>\n" +
" <td>" + gender + "</td>\n" +
" <td>" + score + "</td>\n" +
" <td><a href=\"javascript:void(0);\"οnclick=\"delTr(this);\">删除</a></td>\n" +
" </tr>";
}
//2.删除功能
function delTr(object) {
var table = object.parentNode.parentNode.parentNode;
var tr = object.parentNode.parentNode;
table.removeChild(tr);
}
//3.全选功能
document.getElementById("btn_selectAll").onclick = function () {
var cbs = document.getElementsByName("cb");
for (var i = 0; i < cbs.length; i++) {
cbs[i].checked = true;
}
}
//3.1单击复选框,其他复选框会跟着变
function selectAllCB(obj){
var cbs = document.getElementsByName("cb");
for (var i = 0; i < cbs.length; i++) {
cbs[i].checked = obj.checked;
}
}
//4.全不选功能
document.getElementById("btn_noSelect").onclick = function () {
var cbs = document.getElementsByName("cb");
for (var i = 0; i < cbs.length; i++) {
cbs[i].checked = false;
}
}
//5.反选功能
document.getElementById("btn_rev").onclick = function () {
var cbs = document.getElementsByName("cb");
for (var i = 0; i < cbs.length; i++) {
cbs[i].checked = !cbs[i].checked;
}
}
</script>
</body>
</html>