JavaScript学习(七)——事件练习
实现全选和全不选的功能
<div>
<input id="id" type="text" placeholder="请输入编号">
<input id="name" type="text" placeholder="请输入姓名">
<input id="sex" type="text" placeholder="请输入性别">
<input id="btn_add" type="button" value="添加">
</div>
<table id="table">
<tr>
<th><input type="checkbox" class="checkbox" id="checkboxAll"></th>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>操作</th>
</tr>
<tr>
<td><input type="checkbox" class="checkbox"></td>
<td>1</td>
<td>张三</td>
<td>男</td>
<td><a href="javascript:void(0);" onclick="del_tr(this)">删除</a> </td>
</tr>
<tr>
<td><input type="checkbox" class="checkbox"></td>
<td>2</td>
<td>李四</td>
<td>男</td>
<td><a href="javascript:void(0);" onclick="del_tr(this)">删除</a> </td>
</tr>
<tr>
<td><input type="checkbox" class="checkbox"></td>
<td>3</td>
<td>王五</td>
<td>男</td>
<td><a href="javascript:void(0);" onclick="del_tr(this)">删除</a> </td>
</tr>
</table>
<input type="button" value="全选" id="select_all">
<input type="button" value="全不选" id="no_select_all">
步骤
- 给按钮设置点击事件
- 修改所有复选框的选中状态
首先是全选按钮,获取到节点之后,添加点击事件
var button_sel_all = document.getElementById("select_all");
button_sel_all.onclick = function () {}
根据ClassName忽的checkbox的数组,遍历数组,修改选中状态
var checkboxArr = document.getElementsByClassName("checkbox");
for(i=0;i<checkboxArr.length;i++){
checkboxArr[i].checked = true;
}
全不选按钮一样的做法。
还可以对所有checkbox添加点击事件,记录选中的条数,当条数改变是,修改最上面的checkbox的状态
if(this.checked == true){
selected_count++;
changeCheckboxAll()
}
else {
selected_count--;
changeCheckboxAll()
}
function changeCheckboxAll() {
var checkboxAll = document.getElementById("checkboxAll");
var checkbox = document.getElementsByClassName("checkbox");
if(selected_count==checkbox.length){
checkboxAll.checked = true;
}else {
checkboxAll.checked = false;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
th,td{
border: 1px solid;
}
</style>
</head>
<body>
<div>
<input id="id" type="text" placeholder="请输入编号">
<input id="name" type="text" placeholder="请输入姓名">
<input id="sex" type="text" placeholder="请输入性别">
<input id="btn_add" type="button" value="添加">
</div>
<table id="table">
<tr>
<th><input type="checkbox" class="checkbox" id="checkboxAll"></th>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>操作</th>
</tr>
<tr>
<td><input type="checkbox" class="checkbox"></td>
<td>1</td>
<td>张三</td>
<td>男</td>
<td><a href="javascript:void(0);" onclick="del_tr(this)">删除</a> </td>
</tr>
<tr>
<td><input type="checkbox" class="checkbox"></td>
<td>2</td>
<td>李四</td>
<td>男</td>
<td><a href="javascript:void(0);" onclick="del_tr(this)">删除</a> </td>
</tr>
<tr>
<td><input type="checkbox" class="checkbox"></td>
<td>3</td>
<td>王五</td>
<td>男</td>
<td><a href="javascript:void(0);" onclick="del_tr(this)">删除</a> </td>
</tr>
</table>
<input type="button" value="全选" id="select_all">
<input type="button" value="全不选" id="no_select_all">
<script>
function del_tr(obj) {
var table = obj.parentNode.parentNode.parentNode;
var tr = obj.parentNode.parentNode;
table.removeChild(tr);
}
var button_sel_all = document.getElementById("select_all");
button_sel_all.onclick = function () {
var checkboxArr = document.getElementsByClassName("checkbox");
for(i=0;i<checkboxArr.length;i++){
checkboxArr[i].checked = true;
}
}
var button_sel_all = document.getElementById("no_select_all");
button_sel_all.onclick = function () {
var checkboxArr = document.getElementsByClassName("checkbox");
for(i=0;i<checkboxArr.length;i++){
checkboxArr[i].checked = false;
}
}
var button = document.getElementById("btn_add");
button.onclick = add;
function add() {
var id = document.getElementById("id").value;
var name = document.getElementById("name").value;
var sex = document.getElementById("sex").value;
var table = document.getElementById("table");
table.innerHTML+="<tr><td><input type=\"checkbox\" class=\"checkbox\"></td>" +
"<td>" +id+
"</td><td>" + name +
"</td><td>" + sex+
"</td><td>" + "<a href=\"javascript:void(0);\" οnclick=\"del_tr(this)\">删除</a>" +
"</td></tr>";
}
</script>
</body>
</html>