您的位置：首页 > 编程语言 > ASP

ASP.NET DEMO 12 : CheckBoxList 实现单选【转】

2012-06-04 14:45 561 查看
转自：/article/4756824.html

demo:http://files.cnblogs.com/Jinglecat/DEMO12_CheckBoxListSingleCheck.rar

一看标题估计大家都开始怀疑了：单选？为什么不直接使用 RadioButtonList ？
是的。你是对的。然而，实际应用中需求千变万化，谁让我们的客户够 BT 呢？

主要代码

只有一个通用的 CheckBoxList_Click 函数，
需要注意的是 CheckBoxList 可以呈现为 table 布局，也可以呈现为流布局（使用 span 做外部容器）

我的习惯是，脚本代码中，尽量不直接引用 html id，因为对于服务器控件对应的是 ClientID，而ClientID与控件层次关联的，不利于代码移植复用，因此尽可能选择直接传递对象，通过 DOM 获取相关的父控件和子控件。

function CheckBoxList_Click(sender)
<h3>单选效果的 CheckBoxList</h3>
<div style="float:left">
<h4>静态项</h4>
<asp:CheckBoxList ID="CheckBoxList1" BorderWidth="1" runat="server" RepeatLayout="Flow">
<asp:ListItem onclick="CheckBoxList_Click(this)" Value="Item1">Item1</asp:ListItem>
<asp:ListItem onclick="CheckBoxList_Click(this)" Value="Item2">Item2</asp:ListItem>
<asp:ListItem onclick="CheckBoxList_Click(this)" Value="Item3">Item3</asp:ListItem>
<asp:ListItem onclick="CheckBoxList_Click(this)" Value="Item4">Item4</asp:ListItem>
<asp:ListItem onclick="CheckBoxList_Click(this)" Value="Item5">Item5</asp:ListItem>
</asp:CheckBoxList>
</div>
<div style="float:left;padding-left:100px">
<h4>绑定项</h4>
<asp:CheckBoxList ID="CheckBoxList2" BorderWidth="1" runat="server" DataTextField="Value" DataValueField="Key" OnDataBound="CheckBoxList2_DataBound">
</asp:CheckBoxList>
</div>

兼容性
IE 6 SP6, FF 2.0, Opera 9.2 测试通过

页面效果

全部代码

<%@ Page Language="C#" AutoEventWireup="true"  %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack) {
LoadCheckBoxListData();
}
}

// CheckBoxList DataBound 事件，
// 此事件在执行数据绑定完成之后触发。
protected void CheckBoxList2_DataBound(object sender, EventArgs e)
{
CheckBoxList chkList = (CheckBoxList)sender;
foreach (ListItem item in chkList.Items) {
item.Attributes.Add("onclick", "CheckBoxList_Click(this)");
}
}

private void LoadCheckBoxListData()
{
IDictionary dataList1 = CreateSampleDataList(1, 10);

CheckBoxList2.DataSource = dataList1;
CheckBoxList2.DataBind();

RadioButtonList1.DataSource = dataList1;
RadioButtonList1.DataBind();
}

private SortedList CreateSampleDataList(int startOrdinal, int count)
{
SortedList list = new SortedList();
while (count-- > 0) {
list.Add(startOrdinal, "item" + startOrdinal);
startOrdinal++;
}
return list;
}

</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>DEMO12_CheckBoxListSingleCheck</title>
<script type="text/javascript">
function CheckBoxList_Click(sender)
{
var container = sender.parentNode;
if(container.tagName.toUpperCase() == "TD") { // 服务器控件设置呈现为 table 布局（默认设置），否则使用流布局
container = container.parentNode.parentNode; // 层次： <table><tr><td><input />
}
var chkList = container.getElementsByTagName("input");
var senderState = sender.checked;
for(var i=0; i<chkList.length;i++) {
chkList[i].checked = false;
}
sender.checked = senderState;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<h3>单选效果的 CheckBoxList</h3>
<div style="float:left">
<h4>静态项</h4>
<asp:CheckBoxList ID="CheckBoxList1" BorderWidth="1" runat="server" RepeatLayout="Flow">
<asp:ListItem onclick="CheckBoxList_Click(this)" Value="Item1">Item1</asp:ListItem>
<asp:ListItem onclick="CheckBoxList_Click(this)" Value="Item2">Item2</asp:ListItem>
<asp:ListItem onclick="CheckBoxList_Click(this)" Value="Item3">Item3</asp:ListItem>
<asp:ListItem onclick="CheckBoxList_Click(this)" Value="Item4">Item4</asp:ListItem>
<asp:ListItem onclick="CheckBoxList_Click(this)" Value="Item5">Item5</asp:ListItem>
</asp:CheckBoxList>
</div>
<div style="float:left;padding-left:100px">
<h4>绑定项</h4>
<asp:CheckBoxList ID="CheckBoxList2" BorderWidth="1" runat="server" DataTextField="Value" DataValueField="Key" OnDataBound="CheckBoxList2_DataBound">
</asp:CheckBoxList>
</div>
<div style="float:left;padding-left:100px">
<h4>RadioButtonList 对比</h4>
<asp:RadioButtonList ID="RadioButtonList1" BorderWidth="1" runat="server" DataTextField="Value" DataValueField="Key">
</asp:RadioButtonList>
</div>
</form>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航