jquery实现全选反选操作

最新推荐文章于 2021-05-26 21:46:19 发布

choosezzz

最新推荐文章于 2021-05-26 21:46:19 发布

阅读量555

点赞数

分类专栏： web前端文章标签： jquery html

本文链接：https://blog.youkuaiyun.com/dingse/article/details/78761401

版权

web前端专栏收录该内容

6 篇文章

订阅专栏

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