jQuery实现全选反选功能

最新推荐文章于 2021-05-16 19:10:20 发布

张续栋

最新推荐文章于 2021-05-16 19:10:20 发布

阅读量1.1k

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/qq_44984407/article/details/103714667

版权

笔记专栏收录该内容

9 篇文章 0 订阅

订阅专栏

用jQuery实现全选反选功能

要求
要求1：点击全选的checkbox，让下面所有人名前的checkbox的选中状态和全选的一致

要求2：点击反选按钮，所有人名前的checkbox的选中状态取反

要求3：点击所有人名前的checkbox，判断全选的选中状态

<!DOCTYPE html>
<html lang="zh-CN">

<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>
    <!-- 引入jquery包 -->
    <script src="./jquery.min.js"></script>
</head>

<body>
    <!-- 创建 静态页面 -->
    <div>
        <input type="checkbox" id='one' name="u" id=""><label for="u">全选</label>
        <button>反选</button>
        <ul>
            <li> <input type="checkbox" class='child' name="u1" id="r">1</li>
            <li> <input type="checkbox" class='child' name="u2" id="">2</li>
            <li> <input type="checkbox" class='child' name="u3" id="">3</li>
        </ul>
    </div>


    <script>
        
       
        $('#one').change(function () {
            // 获取全选按钮是否选中  
            var flag = $(this).prop('checked');
            // 将 其它子选项的  按钮 的设置为 flag
            $('.child').prop('checked', flag);
        })
        // 点击 反选按钮  将所有的子项和当前状态相反
        console.log($('button'));

        $('button').on('click', function () {
            // 循环子项 获取子项的 状态 将他们的状态 取反 
            $('.child').each(function (index, vul) {
                var flag = $(vul).prop('checked');
                var flag = !flag;
                $(vul).prop('checked', flag);
                console.log(vul);

            })
        })
        // 点击字选项的 判断 字选项是否选中  用来判断  全选是否选择
        $('.child').change(function () {
            var len1 = $('.child').length;
            var len2 = $('.child:checked').length;
            if (len1 == len2) {
                $('#one').prop('checked', true);
            } else {
                $('#one').prop('checked', false);
            }
        })
    </script>
</body>

</html>

张续栋

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery实现全选反选功能

用jQuery实现全选反选功能要求要求1：点击全选的checkbox，让下面所有人名前的checkbox的选中状态和全选的一致要求2：点击反选按钮，所有人名前的checkbox的选中状态取反要求3：点击所有人名前的checkbox，判断全选的选中状态<!DOCTYPE html><html lang="zh-CN"><head> &lt...
复制链接

扫一扫