jquery实现全选反选操作

梦里梦外; 2022-06-04 09:13 254阅读 0赞

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
            "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
        <meta charset="utf-8">
        <title>复选按钮</title>
        <script type="text/javascript" src="jquery-1.11.1.js"></script>
        <script type="text/javascript">
            $(function(){
                //获得所有name=cboxjquery对象
                var a=$("input[name='cbox']");
                //为全选按钮绑定点击事件
                $("input[name='checkAll']").click(function(){
                    a.each(function(){
                        $(this).prop("checked",$("input[name='checkAll']").prop("checked"));
                    });
                });
    
                //为反选按钮绑定点击事件
                $("#btn").click(function(){
                    a.each(function(){
                        //每一个jquery对象设置为与当前状态相反的选择
                        $(this).prop("checked",!$(this).prop("checked"));
                    });
                    //反选操作之后更改全选按钮的状态
                    change_checked_all();
                });
    
                //为每一个选择按钮绑定点击事件
                a.each(function(){
                    $(this).click(change_checked_all);
                });
    
                //根据当前所有复选按钮的状态更改全选按钮的状态
                function change_checked_all(){
                    var ch=true;
                    //判断是否所有选项都被选择
                    for(var i=0;i< a.size();i++){
                        if($(a.get(i)).prop("checked")==false){
                            ch=false;
                            break;
                        }
                    }
                    //根据所有选择按钮的状态更改全选按钮的状态
                    $("input[name='checkAll']").prop("checked",ch);
                }
            })
        </script>
    </head>
    <body>
        <div id="div1" style="width: 300px;height: 200px">
            <input type="checkbox" name="checkAll"/>全选<br/>
            <input type="checkbox" name="cbox"/>1<br/>
            <input type="checkbox" name="cbox"/>2<br/>
            <input type="checkbox" name="cbox"/>3<br/>
            <input type="checkbox" name="cbox"/>4<br/>
            <input type="checkbox" name="cbox"/>4<br/>
            <input type="checkbox" name="cbox"/>5<br/>
            <input type="checkbox" name="cbox"/>7<br/>
            <input type="checkbox" name="cbox"/>8<br/>
            <input type="checkbox" name="cbox"/>9<br/>
            <input type="button" value="反选" id="btn"/>
        </div>
    </body>
    </html>