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>1td>
        <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>2td>
        <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>3td>
        <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">
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

步骤

给按钮设置点击事件
修改所有复选框的选中状态

首先是全选按钮，获取到节点之后，添加点击事件

var button_sel_all = document.getElementById("select_all");
button_sel_all.onclick = function () {}
1
2

根据ClassName忽的checkbox的数组，遍历数组，修改选中状态

var checkboxArr = document.getElementsByClassName("checkbox");
for(i=0;i<checkboxArr.length;i++){
       checkboxArr[i].checked = true;
}
1
2
3
4

全不选按钮一样的做法。

还可以对所有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;
        }
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <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>1td>
        <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>2td>
        <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>3td>
        <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+="" +
            "" +id+
            "" + name +
            "" + sex+
            "" + "删除" +
            "";

    }
script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97

相关阅读:
【数据结构】数组和字符串（三）：特殊矩阵的压缩存储：三角矩阵、对称矩阵——一维数组
 AcWing.505 火柴排队(离散化&逆序对)
基于web的家电维修系统/家电维修管理系统
 在Linux中安装中文包
 部署LVS-DR群集
 【算法】希尔排序
 20220726NOI模拟赛--考后总结
 数据库学习资源整理
 微服务从代码到k8s部署应有尽有大结局（k8s部署）
CSS3自定义滚动条的颜色等样式 - hover显示切换 - 伪类::-webkit-scrollbar的样式控制
原文地址：https://blog.csdn.net/qq_41505957/article/details/126152272