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

开发者社区> 开发与运维> 正文

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

简介:

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

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

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章