開發要求，原本對CheckBoxList控件是用來讓用戶多選的。但現在特殊要求，這個CheckBoxList控件限制只能單選。
哈哈，看看做出來的效果：
為了你也能實現出來，可以參考下面的方法，第一是準備好一個對象“地支”（Terrestrial Branch）
TerrestrialBranch.cs
復制代碼 代碼如下:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
/// summary>
/// Summary description for TerrestrialBranch
/// /summary>
namespace Insus.NET
{
public class TerrestrialBranch
{
private int _ID;
private string _Name;
public int ID
{
get{return _ID;}
set { _ID = value; }
}
public string Name
{
get { return _Name; }
set { _Name = value; }
}
public TerrestrialBranch()
{
//
// TODO: Add constructor logic here
//
}
public TerrestrialBranch(int id, string name)
{
this.ID = id;
this._Name = name;
}
}
}
用數據填充這個對象，并用泛型Listt>來存儲這十二個對象：
復制代碼 代碼如下:
private ListTerrestrialBranch> GetData()
{
ListTerrestrialBranch> tbs = new ListTerrestrialBranch>();
tbs.Add(new TerrestrialBranch(1,"子"));
tbs.Add(new TerrestrialBranch(2, "丑"));
tbs.Add(new TerrestrialBranch(3, "寅"));
tbs.Add(new TerrestrialBranch(4, "卯"));
tbs.Add(new TerrestrialBranch(5, "辰"));
tbs.Add(new TerrestrialBranch(6, "巳"));
tbs.Add(new TerrestrialBranch(7, "午"));
tbs.Add(new TerrestrialBranch(8, "未"));
tbs.Add(new TerrestrialBranch(9, "申"));
tbs.Add(new TerrestrialBranch(10, "酉"));
tbs.Add(new TerrestrialBranch(11, "戌"));
tbs.Add(new TerrestrialBranch(12, "亥"));
return tbs;
}
在.aspx頁面拉一個CheckBoxList控件，設置兩個屬性RepeatColumns="6" RepeatDirection="Horizontal"
復制代碼 代碼如下:
asp:CheckBoxList ID="CheckBoxListTerrestrialBranch" runat="server" RepeatColumns="6" RepeatDirection="Horizontal">/asp:CheckBoxList>
把剛才準備好的ListTerrestrialBranch>綁定給這個CheckBoxList控件：
復制代碼 代碼如下:
using System;
using System.Collections.Generic;
using System.Data;
using System.Data.OleDb;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Insus.NET;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
Data_Binding();
}
private void Data_Binding()
{
this.CheckBoxListTerrestrialBranch.DataSource = GetData();
this.CheckBoxListTerrestrialBranch.DataTextField = "Name";
this.CheckBoxListTerrestrialBranch.DataValueField = "ID";
this.CheckBoxListTerrestrialBranch.DataBind();
}
}
OK,一切準備就緒，可以寫Javascript腳本，放在head>之內。
復制代碼 代碼如下:
window.onload = function () {
var cbl = document.getElementById('%= CheckBoxListTerrestrialBranch.ClientID %>')
var inputs = cbl.getElementsByTagName("input");
for (var i = 0; i inputs.length; i++) {
if (inputs[i].type == "checkbox") {
inputs[i].onclick = function () {
var cbs = inputs;
for (var i = 0; i cbs.length; i++) {
if (cbs[i].type == "checkbox" cbs[i] != this this.checked) {
cbs[i].checked = false;
}
}
}
}
}
}
您可能感興趣的文章:- asp.net Javascript獲取CheckBoxList的value
- JQuery中對服務器控件 DropdownList, RadioButtonList, CheckboxList的操作總結
- ASP.NET jQuery 實例5 (顯示CheckBoxList成員選中的內容)
- ASP.NET jQuery 實例6 (實現CheckBoxList成員全選或全取消)
- ASP.NET jQuery 實例15 通過控件CustomValidator驗證CheckBoxList
- js操作CheckBoxList實現全選/反選(在客服端完成)
- 在js中判斷checkboxlist(.net控件客戶端id)是否有選中
- asp.net CheckBoxList各項最小寬度CSS樣式(兼容性good)
- CheckBoxList兩列并排編譯為表格顯示具體實現
- ASP.NET中用js取CheckBoxList中值的方法實例
- CheckBoxList多選樣式jquery、C#獲取選擇項
- ASP.NET服務器端控件RadioButtonList，DropDownList，CheckBoxList的取值、賦值用法
- 在.net中用CheckBoxList實現單選
- jQuery獲取checkboxlist的value值的方法
- ASP.NET中CheckBoxList復選框列表控件詳細使用方法
