前端页面中的全选和反选

最新推荐文章于 2024-05-11 02:51:05 发布

我愿成为你头顶的云

最新推荐文章于 2024-05-11 02:51:05 发布

阅读量2k

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/qq_42640067/article/details/118653322

版权

前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

在前端html页面的数据列表展示中，基本都是在table中进行数据展示的，从数据库中查询到的每条记录，基本对应着table中的一个tr行记录。经常有那种全选和反选的功能，如下：
在这里插入图片描述
想要实现的效果是：勾选全选框，下面所有行记录的复选框也自动勾选，取消全选框，下面的复选框也全部取消。并且逐个勾选行记录的复选框时，如果没有勾选全部行记录，则上面的全选框是未勾选状态，如果全部勾选了，那么全选框是勾选状态。主要还是在JS中实现。所有代码如下：

（1）实体类

public class User {

    private Integer id;

    private String name;

    private Integer sex;

    private Date birth;

    private String address;

    private Integer pro;

    private String email;

    private String favo;

    public String getFavo() {
        return favo;
    }

    public void setFavo(String favo) {
        this.favo = favo;
    }

    public Integer getPro() {
        return pro;
    }

    public void setPro(Integer pro) {
        this.pro = pro;
    }

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public Integer getSex() {
        return sex;
    }

    public void setSex(Integer sex) {
        this.sex = sex;
    }

    public Date getBirth() {
        return birth;
    }

    public void setBirth(Date birth) {
        this.birth = birth;
    }

    public String getAddress() {
        return address;
    }

    public void setAddress(String address) {
        this.address = address;
    }

    public String getEmail() {
        return email;
    }

    public void setEmail(String email) {
        this.email = email;
    }
}

（2）dao层

    public List<User> getAllUsers() {
        List<User> users = new ArrayList<>();
        String sql = "select name,sex,birth,address,email from user";
        Connection connection = DataSourceManager.getConnection();
        PreparedStatement preparedStatement = null;
        ResultSet resultSet = null;
        try {
            preparedStatement = connection.prepareStatement(sql);
            resultSet = preparedStatement.executeQuery();
            while(resultSet.next()) {
                // 结果集封装为对象
                User u = new User();
                u.setName(resultSet.getString("name"));
                u.setSex(resultSet.getInt("sex"));
                u.setBirth(resultSet.getDate("birth"));
                u.setAddress(resultSet.getString("address"));
                u.setEmail(resultSet.getString("email"));
                users.add(u);
            }
        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            DataSourceManager.closeConnection(connection);
            DataSourceManager.closeStatement(preparedStatement);
            DataSourceManager.closeResultSet(resultSet);
        }
        return users;
    }

（3）servlet层

在这里插入图片描述

（4）jsp页面

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html>
<head>
    <title>所有用户展示页面</title>
    <script type="text/javascript" src="/servlet_demo/static/js/jquery-2.1.4.min.js"></script>
    <style>
        td {
            height: 38px;
        }
    </style>
</head>
<body>
<table border="1" style="width: 100%; border-collapse: collapse;">
    <thead>
    <tr style="height: 50px;">
        <input type="text" id="total" value="${requestScope.total}" style="display: none;">
        <th>
            全选&nbsp;&nbsp;<input type="checkbox" id="allCheck"/>
        </th>
        <th>姓名</th>
        <th>性别</th>
        <th>生日</th>
        <th>地址</th>
        <th>邮箱</th>
    </tr>
    </thead>
    <tbody style="text-align: center;" id="userDatas">
        <c:if test="${not empty requestScope.users}">
            <c:forEach items="${requestScope.users}" var="user" begin="0" step="1">
                <tr>
                    <td>
                        <input type="checkbox" name="sel" onclick="sureAll()"/>
                    </td>
                    <td>${user.name}</td>
                    <c:if test="${user.sex eq 1}">
                        <td>男</td>
                    </c:if>
                    <c:if test="${user.sex eq 0}">
                        <td>女</td>
                    </c:if>
                    <td>${user.birth}</td>
                    <td>${user.address}</td>
                    <td>${user.email}</td>
                </tr>
            </c:forEach>
        </c:if>
        <c:if test="${empty requestScope.users}">
            <tr>
                <td colspan="5">查无任何信息！</td>
            </tr>
        </c:if>
    </tbody>
    <tfoot></tfoot>
</table>
<script>

    // 勾选全选复选框时
    $('#allCheck').click(function(){
        var flag = this.checked; // 获取该复选框的勾选状态
        // 获取所有行记录的复选框
        var boxes = $('#userDatas :checkbox');
        boxes.each(function(){
            // 将勾选状态和全选复选框状态保持一致
            this.checked = flag;
        });
    });

    var total = Number($('#total').val());
    // 勾选行记录时触发
    function sureAll() {
        // 获取勾选行记录的条目数
        var count = $('#userDatas :checked').length;
        // 勾选数和总数相等时，勾选全选框，否则不勾选
        if(count == total) {
            $('#allCheck').prop('checked',true);
        } else {
            $('#allCheck').prop('checked',false);
        }
    }
</script>
</body>
</html>

（5）效果
在这里插入图片描述
勾选全选框：

行记录全部勾选了，然后取消其中的一个行记录：

全选框被取消了，再勾上这个取消的行记录：

全选框勾上了，然后取消全选框：

行记录勾选状态全部取消了。

（6）小结

其实是非常简单的一个功能，主要是JS里面的代码，只要将所有行记录复选框的状态与全选框状态保持一直就行了，而且注意勾选行记录的数量，如果和总数一致，则全选框选中，如果不一致，则取消。

我愿成为你头顶的云

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
前端页面中的全选和反选

在前端html页面的数据列表展示中，基本都是在table中进行数据展示的，从数据库中查询到的每条记录，基本对应着table中的一个tr行记录。经常有那种全选和反选的功能，如下：想要实现的效果是：勾选全选框，下面所有行记录的复选框也自动勾选，取消全选框，下面的复选框也全部取消。并且逐个勾选行记录的复选框时，如果没有勾选全部行记录，则上面的全选框是未勾选状态，如果全部勾选了，那么全选框是勾选状态。主要还是在JS中实现。所有代码如下：（1）实体类public class User { priva
复制链接

扫一扫

专栏目录