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

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 完整程序

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

    
    
    


你最喜欢的动画片是？
喜羊羊与灰太狼

    猪猪侠

    龙凤双娃

    淘气包马小跳

    


    

    
    
    
    
    
    
    

---

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

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 完整程序

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

    
    
    


你最喜欢的动画片是？
喜羊羊与灰太狼

    猪猪侠

    龙凤双娃

    淘气包马小跳

    


    全选