JavaScript学习（七）——事件练习

张宜强

于 2022-08-04 07:49:17 发布

阅读量355

点赞数

分类专栏： js 笔记文章标签： javascript 学习前端

本文链接：https://blog.csdn.net/qq_41505957/article/details/126152272

版权

笔记同时被 2 个专栏收录

78 篇文章 0 订阅

订阅专栏

7 篇文章 1 订阅

订阅专栏

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>

张宜强

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript学习（七）——事件练习

实现全选和全不选的功能步骤给按钮设置点击事件修改所有复选框的选中状态首先是全选按钮，获取到节点之后，添加点击事件根据ClassName忽的checkbox的数组，遍历数组，修改选中状态全不选按钮一样的做法。还可以对所有checkbox添加点击事件，记录选中的条数，当条数改变是，修改最上面的checkbox的状态...
复制链接

扫一扫