目次

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：$(":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 + "
" + this.value;
            count+=1;
        }
    });
    alert("      "+count+" ，    ：" + string);
});

*1-4完全なプログラム

次は私の完全なプログラムをみんなに分かち合って、完全に利用することができて、よく研究したいです

    
    
    
    $(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 + "
" + this.value;
                    count+=1;
                }
            });
            alert("      "+count+" ，    ：" + string);
        });
    });



あなたが   きなアニメは?
       

       

        

          

    


    

    
    
    
    
    
    
    

サブオプション「すべて選択」ボタンの自動一致について、すなわち、各サブオプションをすべて選択すると、「すべて選択」ボタンが自動的にチェックされ、任意のオプションを削除すると、「すべて選択」ボタンが自動的にチェックされなくなります.

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完全プログラム

以下、私は完全なプログラムを皆さんに共有して、完全に利用することができて、自分で研究することを望んでいます.

    
    
    
    $(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);
            }

        });
    });




あなたが   きなアニメは?