jQuery实现全选、全不选、反选-阿里云开发者社区

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

2016-04-22 3306

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介：

+关注继续查看

如图，需要使用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>