jQuery实现全选、反选、取消

最新推荐文章于 2021-08-16 10:49:48 发布

昆昆欧粑粑

最新推荐文章于 2021-08-16 10:49:48 发布

阅读量552

点赞数 2

分类专栏： JavaScript 文章标签： JavaScript 全选反选取消 JQuery 实例

本文链接：https://blog.youkuaiyun.com/likunkun__/article/details/87125659

版权

JavaScript 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了如何使用jQuery实现全选、反选和取消选择的功能。通过一个简单的HTML表格和按钮，结合jQuery事件绑定，展示了具体实现这些功能的代码示例，包括全选、反选的多种实现方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求：经常看到网页上有全选、反选等等按钮，我们用jQuery实现。

DOM实现参照：DOM实现全选、反选、取消。

一个简单的html表格可以写出来，同时让按钮绑定点击事件：

    <input type="button" value="全选" onclick="allPick();">
    <input type="button" value="反选" onclick="reservePick();">
    <input type="button" value="取消" onclick="cancel();">


    <table border="1" >
        <thead>
            <tr>
                <th>选项</th>
                <th>1</th>
                <th>2</th>
            </tr>
        </thead>
        <tbody id="tb1">
            <tr>
                <td><input type="checkbox"></td>
                <td>1,1</td>
                <td>1,2</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>2,1</td>
                <td>2,2</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>3,1</td>
                <td>3,2</td>
            </tr>
        </tbody>
    </table>

接下来是用JQuery实现全选反选取消：

反选的实现有3种方法：参照下面代码里的注释

    <script src="jquery-3.3.1.js"></script>
    <script>
        function allPick() {
            console.log(11111);
            $('#tb1 :checkbox').prop('checked',true);
        }
        function cancel() {
            $('#tb1 :checkbox').prop('checked',false);
        }
        function reservePick() {
            $('#tb1 :checkbox').each(function () {
                // 这里的this是dom对象，所以可以直接用this.checked来设置值
                // 方法1：
                if (this.checked){
                    this.checked = false;
                }else {
                    this.checked = true;
                }

                // jQuery写法，方法2：用prop方法，有一个参数是获取值，有2个参数是设置值
                if ($(this).prop('checked')){
                    $(this).prop('checked', false);
                } else $(this).prop('checked', true);

                // 方法3，用JavaScript三元式语法来直接设置值
                $(this).prop('checked', $(this).prop('checked')?false:true);
            })
        }
    </script>

完整网页面代码（html）：记得把JQuery包引入并且复制到同一个文件夹

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="button" value="全选" onclick="allPick();">
    <input type="button" value="反选" onclick="reservePick();">
    <input type="button" value="取消" onclick="cancel();">


    <table border="1" >
        <thead>
            <tr>
                <th>选项</th>
                <th>1</th>
                <th>2</th>
            </tr>
        </thead>
        <tbody id="tb1">
            <tr>
                <td><input type="checkbox"></td>
                <td>1,1</td>
                <td>1,2</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>2,1</td>
                <td>2,2</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>3,1</td>
                <td>3,2</td>
            </tr>
        </tbody>
    </table>

    <script src="jquery-3.3.1.js"></script>
    <script>
        function allPick() {
            console.log(11111);
            $('#tb1 :checkbox').prop('checked',true);
        }
        function cancel() {
            $('#tb1 :checkbox').prop('checked',false);
        }
        function reservePick() {
            $('#tb1 :checkbox').each(function () {
                // 这里的this是dom对象，所以可以直接用this.checked来设置值
                // 方法1：
                if (this.checked){
                    this.checked = false;
                }else {
                    this.checked = true;
                }

                // jQuery写法，方法2：用prop方法，有一个参数是获取值，有2个参数是设置值
                if ($(this).prop('checked')){
                    $(this).prop('checked', false);
                } else $(this).prop('checked', true);

                // 方法3，用JavaScript三元式语法来直接设置值
                $(this).prop('checked', $(this).prop('checked')?false:true);
            })
        }
    </script>
</body>
</html>