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

@date:2015-12-27 16:52:00

如图,需要使用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);
            });
        </span><span style="color: #008000;">//</span><span style="color: #008000;">全不选</span>
        $("#check_no").click(<span style="color: #0000ff;">function</span><span style="color: #000000;">(){
            $(</span>"input:checkbox").prop("checked",<span style="color: #0000ff;">false</span><span style="color: #000000;">);
        });

        </span><span style="color: #008000;">//</span><span style="color: #008000;">反选:使用了each(),针对每个操作</span>
        $("#check_reverse").click(<span style="color: #0000ff;">function</span><span style="color: #000000;">(){
            $(</span>"input:checkbox").each(<span style="color: #0000ff;">function</span><span style="color: #000000;">(){
                $(</span><span style="color: #0000ff;">this</span>).prop("checked",!$(<span style="color: #0000ff;">this</span>).prop("checked"<span style="color: #000000;">));
            });
        });

        </span><span style="color: #008000;">//</span><span style="color: #008000;">全选/全不选</span>
        $("#check_switch").click(<span style="color: #0000ff;">function</span><span style="color: #000000;">(){
            $(</span>"input:checkbox").is(":checked")?$("input:checkbox").prop("checked",<span style="color: #0000ff;">false</span>):$("input:checkbox").prop("checked",<span style="color: #0000ff;">true</span><span style="color: #000000;">);
        });
    });
</span>&lt;/script&gt;

</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>

View Code

 

Build by Loppo 0.6.14