ASP. NET Server side controls RadioButtonList DropDownList CheckBoxList value assignment usage

Each of the three controls has an Items collection, and you can use the RepeatLayout and RepeatDirection attributes to control the presentation of the list. If the value of RepeatLayout is Table, the list is rendered in the table. If set to Flow, the list is rendered without any table structure. By default, the value of RepeatDirection is Vertical. Setting this property to Horizontal will render the list horizontally.

RadioButtonList: Control provides a single option list (data source radio) with 1 option selected. Like other list controls, RadioButtonList has one Items collection whose members correspond to each item in the list.

DropDownList: Drop-down list selection. For some forms of input, the user must select 1 option from the list of applicable options (drop-down only 1 option).

CheckBoxList: Multi-selection list, which presents the data source to the user in a horizontal or vertical manner and allows the user to make multiple item choices.

Since these three controls are server-side controls, they need to be resolved on the client side. The following are server-side and client-side examples for the three controls

The server side

<asp:RadioButtonList ID="RadioButtonList1" RepeatDirection="Horizontal" RepeatLayout="Flow"
            runat="server">
            <asp:ListItem Value="0"> The radio 1</asp:ListItem>
            <asp:ListItem Value="1"> The radio 2</asp:ListItem>
            <asp:ListItem Value="2"> The radio 3</asp:ListItem>
        </asp:RadioButtonList>
        <br />
        <asp:CheckBoxList ID="CheckBoxList1" RepeatDirection="Horizontal" RepeatLayout="Flow"
            runat="server">
            <asp:ListItem Value="0"> multi-select 1</asp:ListItem>
            <asp:ListItem Value="1"> multi-select 2</asp:ListItem>
            <asp:ListItem Value="2"> multi-select 3</asp:ListItem>
        </asp:CheckBoxList>
        <br />
        <asp:DropDownList ID="DropDownList1" RepeatDirection="Horizontal" RepeatLayout="Flow"
            runat="server">
            <asp:ListItem Value="0"> The drop-down choice 1</asp:ListItem>
            <asp:ListItem Value="1"> The drop-down choice 2</asp:ListItem>
            <asp:ListItem Value="2"> The drop-down choice 3</asp:ListItem>
        </asp:DropDownList>

After browser parsing

<span id="RadioButtonList1">
      <input id="RadioButtonList1_0" type="radio" name="RadioButtonList1" value="0" /><label for="RadioButtonList1_0"> The radio 1</label>
      <input id="RadioButtonList1_1" type="radio" name="RadioButtonList1" value="1" /><label for="RadioButtonList1_1"> The radio 2</label>
      <input id="RadioButtonList1_2" type="radio" name="RadioButtonList1" value="2" /><label for="RadioButtonList1_2"> The radio 3</label>
   </span>
        <br />
   <span id="CheckBoxList1">
      <input id="CheckBoxList1_0" type="checkbox" name="CheckBoxList1$0" value="0" /><label for="CheckBoxList1_0"> multi-select 1</label>
      <input id="CheckBoxList1_1" type="checkbox" name="CheckBoxList1$1" value="1" /><label for="CheckBoxList1_1"> multi-select 2</label>
      <input id="CheckBoxList1_2" type="checkbox" name="CheckBoxList1$2" value="2" /><label for="CheckBoxList1_2"> multi-select 3</label>
   </span>
        <br />
   <select name="DropDownList1" id="DropDownList1" RepeatDirection="Horizontal" RepeatLayout="Flow">
    <option value="0"> The drop-down choice 1</option>
    <option value="1"> The drop-down choice 2</option>
    <option value="2"> The drop-down choice 3</option> 
   </select>

The operation for these three controls is nothing more than value and assignment, which is done via Jquery and.cs

Jquery operates on three types of controls

1, RadioButtonList

1) values

 $("#RadioButtonList1").change(function () {
   // Pop up the selected item val value 
                alert($("input[name='RadioButtonList1']:checked").val());
  // Pop up the selected item text value 
                alert($("input[name='RadioButtonList1']:checked+label").text())
  });  

2) assignment

// Default selected control 2 item 
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) values

 $("#DropDownList1").change(function () {
// Pop up the selected item Val value 
                alert($("#DropDownList1").val());
// Pop up the selected item text value 
                alert($("#DropDownList1 option:selected").text());
            });

2) assignment

// Default selected control 2 item 
var ddls = $("#DropDownList1 option");
                        for (var i = 0; i < ddl.length; i++) {
                            if (ddl[i].value == "1") {
                                ddl[i].selected = "true";
                            }
                        }

3, CheckBoxList

1) values

$("#CheckBoxList1 > input").click(function () {
               var arrval = [];
                var val = "";
              $("#CheckBoxList1 :checkbox:checked").each(function () {
             // Puts the value of the selected item into the array arrval
                    arrval.push($(this).val())
                })
            // Take the array val Values to ' ,' To connect 
                val = arrval.join(',');
              // Popup all selected items to , The connection 
                                alert(val);
                var arrtext = [];
                var text = "";
                $("#CheckBoxList1 :checkbox:checked").each(function () {
              // To select the item text Values in the arrtext In the array 
                    arrtext.push($(this).next().html());
              // Use the data in the array , To connect 
                    text = arrtext.join(",");
                })
             // Pop up the selected item Text value 
               alert(text);
                });

2) assignment

   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";
                }
            }