ASP.NET服务器端控件RadioButtonList,DropDownList,CheckBoxList的取值、赋值用法

 更新时间:2013年10月11日 12:30:52   作者:  
这三个控件都有一个Items集合,可以用 RepeatLayout 和 RepeatDirection 属性来控制列表的呈现形式

这三个控件都有一个Items集合,可以用 RepeatLayout 和 RepeatDirection 属性来控制列表的呈现形式。如果 RepeatLayout 的值为 Table,那么将在表中呈现列表。如果设置成 Flow,那么将在没有任何表结构的情况下呈现列表。默认情况下,RepeatDirection 的值为 Vertical。将此属性设置成 Horizontal 将会使列表水平呈现。

RadioButtonList:控件提供已选中一个选项的单项选择列表(数据源单选)。与其他列表控件相似,RadioButtonList 有一个 Items 集合,其成员与列表中的每个项目相对应。

DropDownList:下拉列表选择,对于有些形式的输入,用户必须从适用选项列表中选择一个选项(下拉唯一选择)。

CheckBoxList:多选列表,将数据源以横向或纵向方式呈现给用户,用户可以进行多个item的选择。

由于这三个控件是服务器端控件,需要在客户端进行解析,下面有三个控件的服务器端、客户端例子

服务器端

复制代码 代码如下:

<asp:RadioButtonList ID="RadioButtonList1" RepeatDirection="Horizontal" RepeatLayout="Flow"
            runat="server">
            <asp:ListItem Value="0">单选一</asp:ListItem>
            <asp:ListItem Value="1">单选二</asp:ListItem>
            <asp:ListItem Value="2">单选三</asp:ListItem>
        </asp:RadioButtonList>
        <br />
        <asp:CheckBoxList ID="CheckBoxList1" RepeatDirection="Horizontal" RepeatLayout="Flow"
            runat="server">
            <asp:ListItem Value="0">多选一</asp:ListItem>
            <asp:ListItem Value="1">多选二</asp:ListItem>
            <asp:ListItem Value="2">多选三</asp:ListItem>
        </asp:CheckBoxList>
        <br />
        <asp:DropDownList ID="DropDownList1" RepeatDirection="Horizontal" RepeatLayout="Flow"
            runat="server">
            <asp:ListItem Value="0">下拉选择一</asp:ListItem>
            <asp:ListItem Value="1">下拉选择二</asp:ListItem>
            <asp:ListItem Value="2">下拉选择三</asp:ListItem>
        </asp:DropDownList>

经过浏览器解析后

复制代码 代码如下:

<span id="RadioButtonList1">
      <input id="RadioButtonList1_0" type="radio" name="RadioButtonList1" value="0" /><label for="RadioButtonList1_0">单选一</label>
      <input id="RadioButtonList1_1" type="radio" name="RadioButtonList1" value="1" /><label for="RadioButtonList1_1">单选二</label>
      <input id="RadioButtonList1_2" type="radio" name="RadioButtonList1" value="2" /><label for="RadioButtonList1_2">单选三</label>
   </span>
        <br />
   <span id="CheckBoxList1">
      <input id="CheckBoxList1_0" type="checkbox" name="CheckBoxList1$0" value="0" /><label for="CheckBoxList1_0">多选一</label>
      <input id="CheckBoxList1_1" type="checkbox" name="CheckBoxList1$1" value="1" /><label for="CheckBoxList1_1">多选二</label>
      <input id="CheckBoxList1_2" type="checkbox" name="CheckBoxList1$2" value="2" /><label for="CheckBoxList1_2">多选三</label>
   </span>
        <br />
   <select name="DropDownList1" id="DropDownList1" RepeatDirection="Horizontal" RepeatLayout="Flow">
    <option value="0">下拉选择一</option>
    <option value="1">下拉选择二</option>
    <option value="2">下拉选择三</option>
   </select>

对于这三个控件的操作无非就是取值和赋值,下面通过Jquery和.cs两种方式进行操作

Jquery对三种控件进行操作

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

相关文章

  • ASP.Net缓存总结及分析 分享

    ASP.Net缓存总结及分析 分享

    提高性能最好最快的办法当然是通过缓存来改善,对于任何一个web开发者都应该善用缓存。Asp.net下的缓存机制十分强大,用好缓存机制可以让我们极大的改善web应用的性能,下面是一些总结的缓存的知识点,与大家分享交流:
    2013-06-06
  • ASP.NET使用GridView导出Excel实现方法

    ASP.NET使用GridView导出Excel实现方法

    这篇文章主要介绍了ASP.NET使用GridView导出Excel实现方法,是asp.net操作office文件的一个典型应用,代码中备有较为详尽的注释便于读者理解,需要的朋友可以参考下
    2014-11-11
  • Ubuntu16.04系统搭建.Net Core开发环境

    Ubuntu16.04系统搭建.Net Core开发环境

    本文详细讲解了Ubuntu系统搭建.Net Core开发环境的方法,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-02-02
  • ASP.NET动态生成静态页面的实例代码

    ASP.NET动态生成静态页面的实例代码

    生成静态页有很多好处,可以缓解服务器压力、方便搜索网站搜索等等,下面介绍一下生成静态页的实例代码,有需要的朋友可以参考一下
    2013-07-07
  • ASP.NET MVC使用EPPlus,导出数据到Excel中

    ASP.NET MVC使用EPPlus,导出数据到Excel中

    这篇文章介绍的是怎样导出数据到Excel文件中,大多数的后端程序都有报表功能:把显示在Grid中的数据导出到Excel文件中,这篇文章中使用的是EPPlus组件。需要的朋友可以参考借鉴
    2016-12-12
  • 基于SignalR的消息推送与二维码扫描登录实现代码

    基于SignalR的消息推送与二维码扫描登录实现代码

    这篇文章主要介绍了基于SignalR的消息推送与二维码扫描登录实现代码,需要的朋友可以参考下
    2017-02-02
  • 利用IIS调试ASP.NET网站程序的完整步骤

    利用IIS调试ASP.NET网站程序的完整步骤

    这篇文章主要给大家介绍了关于利用IIS调试ASP.NET网站程序的完整步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2018-11-11
  • 小心!ASP.NET网站发布时的那些坑

    小心!ASP.NET网站发布时的那些坑

    ASP.NET网站发布时的那些坑,要小心了,为什么网站发布后,每个页面第一次打开都很卡?ASP.NET session 频繁丢失如何解决?具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-04-04
  • IsPostBack原理的介绍

    IsPostBack原理的介绍

    本篇文章,小编将为大家介绍,关于IsPostBack的原理,有需要的朋友可以参考一下
    2013-04-04
  • 微信公众平台开发教程(二) 基本原理及消息接口总结

    微信公众平台开发教程(二) 基本原理及消息接口总结

    本篇文章主要介绍了微信公众平台开发教程(二) 基本原理及消息接口,具有一定的参考价值,有兴趣的朋友可以了解一下。
    2016-12-12

最新评论