ASP.NET服务器端控件RadioButtonList,DropDownList,CheckBoxList的取值、赋值用法_asp.net教程-查字典教程网
ASP.NET服务器端控件RadioButtonList,DropDownList,CheckBoxList的取值、赋值用法
ASP.NET服务器端控件RadioButtonList,DropDownList,CheckBoxList的取值、赋值用法
发布时间:2016-12-29 来源:查字典编辑
摘要:这三个控件都有一个Items集合,可以用RepeatLayout和RepeatDirection属性来控制列表的呈现形式。如果RepeatL...

这三个控件都有一个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教程学习
    编程开发子分类