使用jQuery实现checkbox全选反选按钮

最新推荐文章于 2021-06-01 11:47:13 发布

Amadeus_711

最新推荐文章于 2021-06-01 11:47:13 发布

阅读量404

点赞数 1

分类专栏： Web组件积累文章标签： web前端 jQuery checkbox

本文链接：https://blog.csdn.net/Amadeus_411/article/details/86741449

版权

Web组件积累专栏收录该内容

2 篇文章 0 订阅

订阅专栏

使用jQuery实现checkbox全选反选按钮

前言
- 样式预览
- 设计思路
代码
- 代码
- 使用注意事项

前言

记得之前有个给我教编程的老师给我讲过一句话：一个程序员如果连自己写过的代码所代表的意思都不知道，那他一定不是个好程序员。也许这句话说的有点狠了，但是不无道理，如果程序员都不知道自己在写什么代码，那至少他业务逻辑都还没搞通，如果业务逻辑没搞通，轻则影响开发效率，重则造成后期重构代码。秉持着“要知道自己在干什么”的思想，我开始重新审视自己的代码。写这些博客一是为了积累经验，二是能和大家一起交流，如有建议和意见，欢迎评论交流！

样式预览

预览图片
如上图所示，一组简单的checkbox和两个简单的button～

设计思路

1.本文监听事件委托至document，这个依情况而定，如果父元素是个模态框，可以委托至模态框。
2.由于当时项目的Dom树比较复杂，我使用了find（）遍历Dom树。
3.如果通过prop()函数更改< input >和< button >元素的type属性，在多数浏览器上将会抛出一个错误，因为该属性一般不允许在后期更改。使用prop()函数操作表单元素的checked、selected、disabled等属性，如果该元素被选中(或禁用)，则返回true，否则(意即HTML中没有该属性)返回false。
4.也许是为了代码的精简性和逻辑性，项目中经常出现三目运算，所以这里我也使用了三目运算，感觉还不错。

代码

请注意导包！

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./jQuery-3.3.1.min.js"></script>
</head>

<body>
    <div>
        <div id="box">
            <input type="checkbox" value="1">选项1<br />
            <input type="checkbox" value="2">选项2<br />
            <input type="checkbox" value="3">选项3<br />
            <input type="checkbox" value="4">选项4<br />
            <input type="checkbox" value="5">选项5<br />
            <input type="checkbox" value="6">选项6<br />
        </div>
        <br />
        <button id="allChecked">全选</button>
        <button id="invChecked">反选</button>
    </div>
    <script>
        //全选按钮逻辑：
        //1.事件委托至document，监听allChecked按钮点击事件
        $(document).on('click', '#allChecked', function (e) {   //监听到后执行函数 
            //2.找到box节点，并向下遍历dom树找到所有type='checkbox'的input  
            $('#box').find("input[type='checkbox']")
                //3.设置找到的input节点的checked属性
                .prop('checked', $(this).is(':checked') ? false : true);
            //注意：设置的值是用三目运算符判断的结果，意思为判断当前的input节点是否有checked属性
            //如果is(':checked')返回true，则逻辑走false分支，反之走true分支。
        });
        //反选按钮逻辑：
        //1.事件委托至document，监听invChecked按钮点击事件
        $(document).on('click', '#invChecked', function (e) {   //监听到后执行函数
            //2.找到box节点，并向下遍历dom树找到所有type='checkbox'的input并遍历执行函数
            $('#box').find("input[type='checkbox']").each(function () {
                //3.设置找到的input节点的checked属性
                $(this).prop('checked', $(this).is(':checked') ? false : true);
                //注意：设置的值是用三目运算符判断的结果，意思为判断当前的input节点是否有checked属性
                //如果is(':checked')返回true，则逻辑走false分支，反之走true分支。
            });
        });

    </script>

</body>

</html>

使用注意事项

1.请注意导包。
2.请注意获取和监听对象的ID。

Amadeus_711

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
使用jQuery实现checkbox全选反选按钮

使用jQuery实现checkbox全选反选按钮前言样式预览设计思路代码代码使用注意事项前言记得之前有个给我教编程的老师给我讲过一句话：一个程序员如果连自己写过的代码所代表的意思都不知道，那他一定不是个好程序员。也许这句话说的有点狠了，但是不无道理，如果程序员都不知道自己在写什么代码，那至少他业务逻辑都还没搞通，如果业务逻辑没搞通，轻则影响开发效率，重则造成后期重构代码。秉持着“要知道自己在干...
复制链接

扫一扫