zoukankan      html  css  js  c++  java
  • 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>
    View Code
  • 相关阅读:
    Markdown语法
    负载均衡、反向代理、CDN的概念
    IDEA远程调试
    跨域简介
    java命令:javac/java/javap
    尾递归实现斐波那契数列
    Java集合:框架
    volatile简介与原理
    乐观锁和悲观锁
    移动端布局的心得
  • 原文地址:https://www.cnblogs.com/52fhy/p/5080379.html
Copyright © 2011-2022 走看看