ASP.NET服务器端控件RadioButtonList,DropDownList,CheckBoxList的取值、赋值用法
这三个控件都有一个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";
}
}
相关文章
- 我们知道,DropDownList下拉框是一个服务器控件,有时候,有些朋友为了方便绑定DropDownList下拉框的选项,但又想在DropDownList实现客户端的下拉事件,那该怎么实现呢?...2021-09-22
ASP.NET中CheckBoxList复选框列表控件详细使用方法
本文主要介绍CheckBoxList几种常见的用法,并做出范例演示供大家参考,希望对学习asp.net的朋友有所帮助。...2021-09-22DropDownList获取的SelectIndex一直为0的问题
由于初始化判断出错导致每次传到服务器的时候会初始化一次,这就导致每次获取DropDownList的SelectIndex的时候只能是0...2021-09-22DropDownList 下拉框选择改变促发事件和防全局刷新(推荐)
这篇文章主要介绍了DropDownList 下拉框选择改变促发事件和防全局刷新(推荐)的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下...2021-09-22ASP.NET笔记之 ListView 与 DropDownList的使用
本篇文章小编为大家介绍,ASP.NET笔记之 ListView 与 DropDownList的使用。需要的朋友参考下...2021-09-22- gridview和checkboxlist的嵌套使用,会有效的提高开发的效率,不过很多的童鞋们对此还是很陌生的,接下来将帮助童鞋们实现gridview和checkboxlist的嵌套使用,感兴趣的朋友可以了解下,或许对你有所帮助...2021-09-22
在ASP.NET 2.0中操作数据之三十三:基于DataList和Repeater使用DropDownList过滤的主/从报表
前面已经介绍过使用DropDownList过滤的主/从报表,不过当时是基于GridView,本文算是复习一下,基于DataList和Repeater再次实现一下相同的功能。...2021-09-22- 用CheckBoxList实现单选的原因是我觉得CheckBoxList控件页面展示效果要好看一些,需要的朋友可以参考下...2021-09-22
ASP.NET服务器端控件RadioButtonList,DropDownList,CheckBoxList的取值、赋值用法
这三个控件都有一个Items集合,可以用 RepeatLayout 和 RepeatDirection 属性来控制列表的呈现形式...2021-09-22ASP.NET DropDownListCheckBox使用示例(解决回发问题)
本文为大家介绍下ASP.NET DropDownListCheckBox的使用,这个是根据LigerUI改的,解决了回发问题,喜欢的朋友可以参考下...2021-09-22- 在某些时候表中没有可以排序的字段同时呢也不想修改表结构,但它的项文本有序号这时就可以用这方法排序,感兴趣的你可以参考下,或许本文知识点对你有所帮助...2021-09-22
ASP.NET中RadioButtonList绑定后台数据后触发点击事件
这篇文章主要介绍了ASP.NET中RadioButtonList绑定后台数据后触发点击事件的相关资料,感兴趣的小伙伴们可以参考一下...2021-09-22- C# DropDownList中点击打开新窗口的方法,需要的朋友可以参考一下...2020-06-25
- 这篇文章主要介绍了DropDownList绑定数据表实现两级联动具体实现,需要的朋友可以参考下...2021-09-22
ASP.NET中DropDownList和ListBox实现两级联动功能
这篇文章主要介绍了ASP.NET中DropDownList和ListBox实现两级联动功能的相关资料,需要的朋友可以参考下...2021-09-22ASP.NET MVC DropDownList数据绑定及使用详解
DropDownList 控件用于创建下拉列表。DropDownList 控件中的每个可选项都是由 ListItem 元素定义的!该控件支持数据绑定...2021-09-22如何为CheckBoxList和RadioButtonList添加滚动条
这篇文章主要介绍了为CheckBoxList和RadioButtonList添加滚动条的方法,感兴趣的小伙伴们可以参考一下...2021-09-22asp.net实现递归方法取出菜单并显示在DropDownList中(分栏形式)
这篇文章主要介绍了asp.net实现递归方法取出菜单并显示在DropDownList中的方法,涉及asp.net递归算法与DropDownList使用技巧,需要的朋友可以参考下...2021-09-22- 这篇文章主要为大家详细介绍了ASP.NET控件之RadioButtonList的使用方法,感兴趣的小伙伴们可以参考一下...2021-09-22
asp.net中不能在DropDownList中选择多个项 原因分析及解决方法
不能在 DropDownList 中选择多个项,在前一步操作的过程中,已经选择了某个Item...2021-09-22