jQuery实现全选与反选的功能（附带jQuery jar包）

最新推荐文章于 2024-01-23 19:19:19 发布

嘘 -你听

最新推荐文章于 2024-01-23 19:19:19 发布

阅读量269

点赞数

分类专栏： html js jquery 文章标签： js jquery html

本文链接：https://blog.csdn.net/weixin_44657829/article/details/106043130

版权

html 同时被 3 个专栏收录

11 篇文章 0 订阅

订阅专栏

6 篇文章 0 订阅

订阅专栏

jquery

6 篇文章 0 订阅

订阅专栏

jQuery实现全选与反选的功能（js实现：https://blog.csdn.net/weixin_44657829/article/details/105740105）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.5.0.js"></script>
</head>
<body>
    <input type="checkbox" name="interest"> 篮球 <br>
    <input type="checkbox" name="interest"> 读书 <br>
    <input type="checkbox" name="interest"> 电影 <br>
    <input type="checkbox" name="interest"> 阅读 <br>
    <hr>
    <input type="checkbox" id="selectAllOrNot" name="selectAllOrNot"> 全选/全不选
    <button onclick="reverseCheck()">反选</button>
</body>
<script>
    // 当全选按钮改变的时候
    $('#selectAllOrNot').change(function() {
        // 获取 ”全选/全不选“ 本身的状态， true或者false
        var status = this.checked;

        // 通过prop将所有被选中的 input进行一次性的设置。
        $('input[name="interest"]').prop('checked', status);
    })
    // 反选功能
    function reverseCheck() {
        var flag = true;
        $('input[name="interest"]').each((index, dom) => {
            // dom.checked 只的是当前遍历的checkbox的选中状态 true, false
            var status = dom.checked;  //获取当前遍历的dom的选中状态

            // 将每个 “兴趣" 的状态取反
            $(dom).prop('checked', !status);

            // 之前如果有一个“兴趣"之前的状态是选中，那么最终 '全选/全不选' 肯定为不选中
            if(status) {
                flag = false;
            }
        });
        $('#selectAllOrNot').prop('checked', flag);
    }

    /**
     * 通过jquery的方式，那么给一组 checkbox 绑定事件，可以一次性绑定，不用
     * 像js那样，一个个遍历单独绑定
     */
    $('input[name="interest"]').change(function() {
        /**
        // 因为每个 '兴趣' 一个独立的存在，在改变我自己本身的时候，要去看一下别人的状态
        $('input[name="interest"]').each(function() {

        })
         */
        $('#selectAllOrNot').prop('checked', $('input[name="interest"]').length ==  $('input[name="interest"]:checked').length);
    })

    /** 通过原生js的方式，绑定事件的时候必须遍历一个个绑定
    var interest = document.getElementsByClassName('interest');
    for(var i = 0; i < interest.length; i++){
        interest[i].onchange = function() {
        }
    }
    */
</script>
</html>

嘘 -你听

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery实现全选与反选的功能（附带jQuery jar包）

jQuery实现全选与反选的功能（js实现：https://blog.csdn.net/weixin_44657829/article/details/105740105）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="js/jquery-3.5.0.js"
复制链接

扫一扫