jQuery实现全选、全不选、反选

最新推荐文章于 2024-10-07 09:24:46 发布

weixin_33922672

最新推荐文章于 2024-10-07 09:24:46 发布

阅读量82

点赞数

文章标签： javascript ViewUI

如图，需要使用jQuery实现全选、全不选、反选功能：

核心代码：

全选

$("#check_all").click(function(){
    $("input:checkbox").prop("checked",true);
});

全不选

$("#check_no").click(function(){
    $("input:checkbox").prop("checked",false);
});

反选

$("#check_reverse").click(function(){
    $("input:checkbox").each(function(){
        $(this).prop("checked",!$(this).prop("checked"));
    });
});

全选/全不选

$("#check_switch").click(function(){
    $("input:checkbox").is(":checked")?$("input:checkbox").prop("checked",false):$("input:checkbox").prop("checked",true);
});

全部代码：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="js/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            //全选
            $("#check_all").click(function(){
                $("input:checkbox").prop("checked",true);
            });

            //全不选
            $("#check_no").click(function(){
                $("input:checkbox").prop("checked",false);
            });

            //反选:使用了each(),针对每个操作
            $("#check_reverse").click(function(){
                $("input:checkbox").each(function(){
                    $(this).prop("checked",!$(this).prop("checked"));
                });
            });

            //全选/全不选
            $("#check_switch").click(function(){
                $("input:checkbox").is(":checked")?$("input:checkbox").prop("checked",false):$("input:checkbox").prop("checked",true);
            });
        });
    </script>
</head>
<body>
    <ul>
        <li><input type="checkbox">aa</li>
        <li><input type="checkbox">bb</li>
        <li><input type="checkbox">cc</li>
        <li><input type="checkbox">dd</li>
        <li><input type="checkbox">ee</li>
    </ul>
    <button id="check_all">全选</button>
    <button id="check_no">全不选</button>
    <button id="check_reverse">反选</button>
    <button id="check_switch">全选/全不选</button>
</body>
</html>