jQuery系列（三）：jQuery实现表单【全选】、【全不选】、【反选】、【提交】专刊

最新推荐文章于 2021-10-28 09:30:12 发布

北溟南风起

最新推荐文章于 2021-10-28 09:30:12 发布

阅读量418

点赞数 1

文章标签： js jquery

本文链接：https://blog.csdn.net/QQQZSJ/article/details/107334484

版权

1. 全选

//1.全选
$("#btn1").click(function(){
    //#bbffaa
    $("input[type='button']").eq(0).css("background-color","#bbffaa").siblings().css("background-color","#fff");
    //方法1：$(":checkbox").attr("checked",true);
    //或者 推荐方法2：
    var $cc = $(":checkbox");
    $cc.each(function(){
        var ed = this.checked;
        //this表达是DOM风格
        this.checked = true;
    });
});

2. 全不选

//2.全不选
$("#btn2").click(function(){
    $("input[type='button']").eq(1).css("background-color","#bbffaa").siblings().css("background-color","red");
    //方法1：$(":checkbox").attr("checked",false);
    //或者 推荐方法2：
    var $cc = $(":checkbox");
    $cc.each(function(){
        var ed = this.checked;
        this.checked = false;
    });
});

3. 反选

//3.反选
$("#btn3").click(function(){
    $("input[type='button']").eq(2).css("background-color","#bbffaa").siblings().css("background-color","red");
    var $cc = $(":checkbox");
    $cc.each(function(){
        //var ed = this.checked;
        //或者
        var $ed = $(this).attr("checked");  //1个参数是取值  2个参数是赋值
        this.checked = ! this.checked;
    });
});

4. 提交

//4.提交
$("#btn4").click(function(){
    $("input[type='button']").eq(3).css("background-color","#bbffaa").siblings().css("background-color","red");
    var string = "";
    var count = 0;
    var $cc= $(":checkbox");
    $cc.each(function(){
        var ed = this.checked;
        if(ed == true){
            string = string + "\n" + this.value;
            count+=1;
        }
    });
    alert("你一共选择了"+count+"项，具体如下：" + string);
});

* 1-4 完整程序

下面把我完整的程序分享给大家，完全可用，希望仔细研究

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
    <title>选择器练习</title>
    <script type="text/javascript" src="../4.jquery/jquery-3.5.1.js"></script>
    <script type="text/javascript">
    $(function(){
        //1.全选
        $("#btn1").click(function(){
            //#bbffaa
            $("input[type='button']").eq(0).css("background-color","#bbffaa").siblings().css("background-color","#fff");
            //方法1：$(":checkbox").attr("checked",true);
            //或者 推荐方法2：
            var $cc = $(":checkbox");
            $cc.each(function(){
                var ed = this.checked;
                //this表达是DOM风格
                this.checked = true;
            });
        });
        //2.全不选
        $("#btn2").click(function(){
            $("input[type='button']").eq(1).css("background-color","#bbffaa").siblings().css("background-color","red");
            //方法1：$(":checkbox").attr("checked",false);
            //或者 推荐方法2：
            var $cc = $(":checkbox");
            $cc.each(function(){
                var ed = this.checked;
                this.checked = false;
            });
        });
        //3.反选 
        $("#btn3").click(function(){
            $("input[type='button']").eq(2).css("background-color","#bbffaa").siblings().css("background-color","red");
            var $cc = $(":checkbox");
            $cc.each(function(){
                //var ed = this.checked;
                //或者 
                var $ed = $(this).attr("checked");  //1个参数是取值  2个参数是赋值
                this.checked = ! this.checked;
            });
        });
        //4.提交
        $("#btn4").click(function(){
            $("input[type='button']").eq(3).css("background-color","#bbffaa").siblings().css("background-color","red");
            var string = "";
            var count = 0;
            var $cc= $(":checkbox");
            $cc.each(function(){
                var ed = this.checked;
                if(ed == true){
                    string = string + "\n" + this.value;
                    count+=1;
                }
            });
            alert("你一共选择了"+count+"项，具体如下：" + string);
        });
    });
</script>
</head>
<body>
<h1>你最喜欢的动画片是？</h1>
<input type="checkbox" name="items" value="喜羊羊与灰太狼" />喜羊羊与灰太狼<br>
    <input type="checkbox" name="items" value="猪猪侠" />猪猪侠<br>
    <input type="checkbox" name="items" value="龙凤双娃" />龙凤双娃<br>
    <input type="checkbox" name="items" value="淘气包马小跳" />淘气包马小跳<br>
    <br><br>
    <div id="button">
    <input id="btn1" type="button" name="checkedAllBtn" value="全选" />
    <input id="btn2" type="button" name="checkedNoBtn" value="全不选" />
    <input id="btn3" type="button" name="checkedRevBtn" value="反选" />
    <input id="btn4" type="button" name="sendBtn" value="提交" />
    </div>
    </body>
    </html>

关于子选项【全选】按钮的自动匹配问题，也即当我们全部选中各个子选项时，【全选】按钮自动勾选上，当我们任意去掉一个选项时，【全选】按钮自动取消勾选。

5【全选】按钮操作选项

//1.全选框
$("#btn1").click(function(){
    var ck = this.checked;//获取当前按钮状态 （是否选中？）
    $("input[name='items']").attr("checked",ck);
});

6 选项与【全选】按钮的自动状态匹配

//2.全部选择则”全选“按钮被选中，有一个不选，则"全选按钮"就不被选中
$("input[name='items']").click(function(){
    //判断是否全部选中 (动画片总数 == 选中的爱好总数)
    //选项总数
    var alen = $("input[name='items']").length;
    //选中的个数
    var clen = $("input[name='items']:checked").length;
    if(alen==clen){
        $("#btn1").attr("checked",true);
    }else {
        $("#btn1").attr("checked",false);
    }

});

* 5-6 完整程序

下面我把完整程序分享给大家，完全可用，希望自行研究。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
    <title>全选按钮与子项的匹配问题</title>
    <script type="text/javascript" src="../4.jquery/jquery-3.5.1.js"></script>
    <script>
    $(function(){
        //1.全选框
        $("#btn1").click(function(){
            var ck = this.checked;//获取当前按钮状态 （是否选中？）
            $("input[name='items']").attr("checked",ck);
        });
        //2.全部选择则”全选“按钮被选中，有一个不选，则"全选按钮"就不被选中
        $("input[name='items']").click(function(){
            //判断是否全部选中 (动画片总数 == 选中的爱好总数)
            //选项总数
            var alen = $("input[name='items']").length;
            //选中的个数
            var clen = $("input[name='items']:checked").length;
            if(alen==clen){
                $("#btn1").attr("checked",true);
            }else {
                $("#btn1").attr("checked",false);
            }

        });
    });

</script>
</head>
<body>
<h1>你最喜欢的动画片是？</h1>
<input type="checkbox" name="items" value="喜羊羊与灰太狼" />喜羊羊与灰太狼<br>
    <input type="checkbox" name="items" value="猪猪侠" />猪猪侠<br>
    <input type="checkbox" name="items" value="龙凤双娃" />龙凤双娃<br>
    <input type="checkbox" name="items" value="淘气包马小跳" />淘气包马小跳<br>
    <br><br>
    <input id="btn1" type="checkbox" name="checkedAllBtn" value="全选" />全选
    </body>
    </html>

北溟南风起

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
jQuery系列（三）：jQuery实现表单【全选】、【全不选】、【反选】、【提交】专刊

目录1. 全选2. 全不选3. 反选4. 提交* 1-4 完整程序5【全选】按钮操作选项6 选项与【全选】按钮的自动状态匹配* 5-6 完整程序1. 全选//1.全选$("#btn1").click(function(){ //#bbffaa $("input[type='button']").eq(0).css("background-color","#bbffaa").siblings().css("background-color","#fff"); //方法1：$(":
复制链接

扫一扫