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

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

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

前言

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

样式预览

使用jQuery实现checkbox全选反选按钮_第1张图片
如上图所示,一组简单的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。

你可能感兴趣的:(Web组件积累)