jq全选全不选、反选和删除（入门详细）

摘抄小能手

已于 2023-09-04 10:11:24 修改

阅读量220

点赞数 7

分类专栏： jQuery 文章标签： es6

于 2023-08-16 19:57:15 首次发布

本文链接：https://blog.csdn.net/m0_61963865/article/details/132326426

版权

jQuery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

css代码如下

这里需要引用jjq文件，网络不好的话可以下载下来下载地址Download jQuery | jQuery

<head lang="en">
    <meta charset="UTF-8">
    <title>案例</title>
    <style>
        #form {
            width: 480px;
            margin: 30px auto;
            border: 1px solid #eee;
            border-radius: 5px;
            padding: 10px;
            line-height: 30px;
            position: relative;
        }

        button {
            position: absolute;
            right: 10px;
            bottom: 10px;
        }

        #tab {
            width: 500px;
            margin: 30px auto;
            border-collapse: collapse;
        }

        th,
        td {
            border: 1px solid #000;
            padding: 5px;
        }

        tbody tr td:first-child {
            text-align: center;
        }

        /*input[type]  属性选择器  选择input标签，并且有type属性input标签*/
        /*input[type = "checkbox"]  选择有type属性并且值为checkbox的input标签*/

        input[type="checkbox"] {
            width: 15px;
            height: 15px;
        }

        #div1 {
            position: relative;
            width: 480px;
            padding: 10px;
            margin: 0 auto;
        }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
</head>

html代码如下

<div id="form">
        请输入姓名: <input type="text" id="name"> <br> 
        请输入性别: <input type="radio" id="sex" name="sex" checked>男 
                   <input type="radio" name="sex">女<br> 
        请输入年龄: <input type="text" id="age">
        <button>添加到表格</button>
    </div>
    <table id="tab">
        <thead>
            <tr>
                <th width="20%"><input type="checkbox" id="all">全选</th>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input type="checkbox"></td>
                <td>张三</td>
                <td>女</td>
                <td>88</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>李四</td>
                <td>男</td>
                <td>18</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>王五</td>
                <td>女</td>
                <td>1</td>
            </tr>
        </tbody>
    </table>
    <div id="div1">
        <button>删除所选行</button>
    </div>

js代码如下

全选全不选、反选和删除

<script>
        $("#form button").click(function () {
            //不能为空
            if ($("input:eq(0)").val() == '' && $("input:eq(3)").val() == '') {
                alert('请输入账号和密码');
                return false;
            };
            //添加内容
            $("tbody").append(`
            <tr>
                <td><input type="checkbox"></td>
                <td>${$("input:eq(0)").val()}</td >
                <td>${$("input:eq(1)").prop("checked") ? '男' : '女'}</td>
                <td>${$("input:eq(3)").val()}</td>
            </tr >
            `);
            // 添加完毕之后清零
            $("input:eq(0)").val('');
            $("input:eq(3)").val('');
            $(':radio:eq(0)').prop('checked', true);
            $("#all").prop("checked", false);
        });

        //全选
        $("#all").click(function () {
            $("tbody input").prop("checked", $(this).prop("checked"));
        });
        //全不选
        $('tbody').on('click', 'input', function () {
            $('tbody input').length == $('tbody input:checked').length ? 
            $('#all').prop('checked', true) : $('#all').prop('checked', false);
        });

        //删除
        $("#div1 button").click(function () {
            $("tbody input:checked").parents('tr').remove();
            $("#all").prop("checked", false);
        });
    </script>

整体代码如下

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>案例</title>
    <style>
        #form {
            width: 480px;
            margin: 30px auto;
            border: 1px solid #eee;
            border-radius: 5px;
            padding: 10px;
            line-height: 30px;
            position: relative;
        }

        button {
            position: absolute;
            right: 10px;
            bottom: 10px;
        }

        #tab {
            width: 500px;
            margin: 30px auto;
            border-collapse: collapse;
        }

        th,
        td {
            border: 1px solid #000;
            padding: 5px;
        }

        tbody tr td:first-child {
            text-align: center;
        }

        /*input[type]  属性选择器  选择input标签，并且有type属性input标签*/
        /*input[type = "checkbox"]  选择有type属性并且值为checkbox的input标签*/

        input[type="checkbox"] {
            width: 15px;
            height: 15px;
        }

        #div1 {
            position: relative;
            width: 480px;
            padding: 10px;
            margin: 0 auto;
        }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
</head>

<body>
    <div id="form">
        请输入姓名: <input type="text" id="name"> <br> 请输入性别: <input type="radio" id="sex" name="sex" checked>男 <input
            type="radio" name="sex">女<br> 请输入年龄: <input type="text" id="age">
        <button>添加到表格</button>
    </div>
    <table id="tab">
        <thead>
            <tr>
                <th width="20%"><input type="checkbox" id="all">全选</th>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input type="checkbox"></td>
                <td>张三</td>
                <td>女</td>
                <td>88</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>李四</td>
                <td>男</td>
                <td>18</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>王五</td>
                <td>女</td>
                <td>1</td>
            </tr>
        </tbody>
    </table>
    <div id="div1">
        <button>删除所选行</button>
    </div>
    <script>
        $("#form button").click(function () {
            //不能为空
            if ($("input:eq(0)").val() == '' && $("input:eq(3)").val() == '') {
                alert('请输入账号和密码');
                return false;
            };
            //添加内容
            $("tbody").append(`
            <tr>
                <td><input type="checkbox"></td>
                <td>${$("input:eq(0)").val()}</td >
                <td>${$("input:eq(1)").prop("checked") ? '男' : '女'}</td>
                <td>${$("input:eq(3)").val()}</td>
            </tr >
            `);
            // 添加完毕之后清零
            $("input:eq(0)").val('');
            $("input:eq(3)").val('');
            $(':radio:eq(0)').prop('checked', true);
            $("#all").prop("checked", false);
        });

        //全选
        $("#all").click(function () {
            $("tbody input").prop("checked", $(this).prop("checked"));
        });
        //全不选
        $('tbody').on('click', 'input', function () {
            $('tbody input').length == $('tbody input:checked').length ? $('#all').prop('checked', true) : $('#all').prop('checked', false);
        });

        //删除
        $("#div1 button").click(function () {
            $("tbody input:checked").parents('tr').remove();
            $("#all").prop("checked", false);
        });
    </script>

</html>

如有错误欢迎私信或评论留言