全选和反选

慕千千Bebe

于 2022-03-15 23:23:32 发布

阅读量1.7k

点赞数

分类专栏： Javascript 文章标签： html 前端

本文链接：https://blog.csdn.net/qq_41988113/article/details/123478050

版权

本文介绍了在前端开发中如何实现全选和反选功能，包括点击全选按钮时，所有复选框被选中；取消全选时，所有复选框变为未选中状态；当所有复选框被选中时，全选按钮自动选中；若有任一复选框未选中，全选按钮取消选中。

摘要由CSDN通过智能技术生成

1. 选中"全选"框，以下所有选项全部勾选。
2. 把"全选"框从选中状态勾选成未选中状态，其他复选框全部取消选中效果。
3. 当其他复选框全部选中，"全选框"为选中状态。
4. 当其他复选框有一个未选中，"全选框"取消选中状态。

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .wrap {
            width: 300px;
            margin: 100px auto 0;
        }

        table {
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
            width: 300px;
        }

        th,
        td {
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }

        th {
            background-color: #09c;
            font: bold 16px "微软雅黑";
            color: #fff;
        }

        td {