摘要:[ASP.NET] 讓 CheckBoxList 實現單選功能
今天週一上班就有事要忙
剛好這次遇到開發的是之前同事
原始碼都已經不見了....
但是USER又有需求
只好想辦法去修改.....
剛好看到DOM.....不多說~直接看CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>CheckBoxList 實現單選功能</title>
</head>
<script language="javascript" type="text/javascript">
// 不直接引用 html id，因為伺服器控制項對應的是 ClientID，而ClientID與控制項層次有關，不利程式碼移植
// 因此盡可能選擇直接傳遞物件，通過 DOM 獲取相關的父控制項和子控制項。
function CBL_SingleChoice(sender)
{
var container = sender.parentNode;
if(container.tagName.toUpperCase() == "TD")
{ // table 布局，否則為span布局
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>
<body>
<form id="form1" runat="server">
<div>
<asp:CheckBoxList ID="cbl_1" runat="server" RepeatDirection="Horizontal">
<asp:ListItem Value="w" Text="測試_1" onclick="CBL_SingleChoice(this);"></asp:ListItem>
<asp:ListItem Value="p" Text="測試_2" onclick="CBL_SingleChoice(this);"></asp:ListItem>
<asp:ListItem Value="c" Text="測試_3" onclick="CBL_SingleChoice(this);"></asp:ListItem>
</asp:CheckBoxList>
</div>
</form>
</body>
</html>
Y2J's Life:http://kimenyeh.blogspot.tw/