这三个控件都有一个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自定义Web服务器控件之Button控件
- asp.net Page.EnableEventValidation 属性验证服务器控件的回发和回调事件出现的错误
- jquery获取ASP.NET服务器端控件dropdownlist和radiobuttonlist生成客户端HTML标签后的value和text值
- asp.net 服务器控件的 ID,ClientID,UniqueID 的区别
- asp.net下使用Request.From获取非服务器控件的值的方法
- jQuery生成asp.net服务器控件的代码
- ASP.NET 动态写入服务器端控件
- asp.net Page.Controls对象(找到所有服务器控件)
- Asp.Net使用服务器控件Image/ImageButton显示本地图片的方法
声明：本站（华域联盟www.cnhackhy.com）所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
评论(0)