ASP.NETサーバ側コントロールRadioButtonList,DropDownList,CheckBox Listの取値・賦値用法

この3つのコントロールには、RepeatLayoutプロパティとRepeatDirectionプロパティを使用してリストの表示形式を制御できるItemsセットがあります.RepeatLayoutの値がTableの場合、リストが表に表示されます.Flowに設定すると、テーブル構造なしでリストが表示されます.デフォルトでは、RepeatDirectionの値はVerticalです.このプロパティをHorizontalに設定すると、リストが水平に表示されます.
RadioButtonList:コントロールは、選択されたオプションの単一選択リスト(データソースラジオ)を提供します.他のリストコントロールと同様に、RadioButtonListにはリスト内の各項目に対応するItemsセットがあります.
DropDownList:ドロップダウンリスト選択、いくつかの形式の入力に対して、ユーザーは適用オプションリストから1つのオプション(ドロップダウン唯一選択)を選択しなければならない.
CheckBoxList:複数選択リストで、データソースを横または縦にユーザーに提示し、ユーザーは複数のitemの選択を行うことができる.
この3つのコントロールはサーバ側のコントロールであるため、クライアントで解析する必要があります.以下に3つのコントロールのサーバ側、クライアントの例があります.
サーバ側

            runat="server">

               

               

               

        

        


                    runat="server">

               

               

               

        

        


                    runat="server">

                 

                 

                 

        

ブラウザ解析後

この3つのコントロールに対する操作は、値を取ることと値を割り当てることにほかならない.以下、Jqueryと.csの2つの方式で操作する
Jqueryは3つのコントロールを操作します
 1、RadioButtonList
1)値を取る

 $("#RadioButtonList1").change(function () {

   //      val 

                alert($("input[name='RadioButtonList1']:checked").val());

  //      text 

                alert($("input[name='RadioButtonList1']:checked+label").text())

  }); 

2)賦課

//       

var rbts = document.getElementsByName("RadioButtonList1");

            for (var i = 0; i < rbts.length; i++) {

                if (rbts[i].value == "1")

                    rbts[i].checked = "true";

            }

2、DropDownList
1)値を取る

 $("#DropDownList1").change(function () {

//      Val 

                alert($("#DropDownList1").val());

//      text 

                alert($("#DropDownList1 option:selected").text());

            });

2)賦課

//       

var ddls = $("#DropDownList1 option");

                        for (var i = 0; i < ddl.length; i++) {

                            if (ddl[i].value == "1") {

                                ddl[i].selected = "true";

                            }

                        }

3、CheckBoxList
1)値を取る

$("#CheckBoxList1 > input").click(function () {

               var arrval = [];

                var val = "";

              $("#CheckBoxList1 :checkbox:checked").each(function () {

             //          arrval

                    arrval.push($(this).val())

                })

            //     val  ‘,'    

                val = arrval.join(',');

              //         ,  

                                alert(val);

                var arrtext = [];

                var text = "";

                $("#CheckBoxList1 :checkbox:checked").each(function () {

              //     text   arrtext   

                    arrtext.push($(this).next().html());

              //        ,    

                    text = arrtext.join(",");

                })

             //      Text 

               alert(text);

                });

2)賦課

   var cbks = $("#CheckBoxList1 input[type='checkbox']");

            for (var i = 0; i < cbks.length; i++) {

                if (cbks[i].value== "1"||cbks[i].value=="2") {

                    cbks[i].checked = "true";

                }

            }