限制CheckBoxList控件只能单选实现代码及演示动画
2013-01-23 00:00
676 查看
开发要求,原本对CheckBoxList控件是用来让用户多选的。但现在特殊要求,这个CheckBoxList控件限制只能单选。
哈哈,看看做出来的效果:
为了你也能实现出来,可以参考下面的方法,第一是准备好一个对象“地支”(Terrestrial Branch)
TerrestrialBranch.cs
用数据填充这个对象,并用泛型List<t>来存储这十二个对象:
在.aspx页面拉一个CheckBoxList控件,设置两个属性RepeatColumns="6" RepeatDirection="Horizontal"
把刚才准备好的List<TerrestrialBranch>绑定给这个CheckBoxList控件:
OK,一切准备就绪,可以写Javascript脚本,放在<head>之内。
哈哈,看看做出来的效果:
为了你也能实现出来,可以参考下面的方法,第一是准备好一个对象“地支”(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; } } }
用数据填充这个对象,并用泛型List<t>来存储这十二个对象:
private List<TerrestrialBranch> GetData() { List<TerrestrialBranch> tbs = new List<TerrestrialBranch>(); 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>
把刚才准备好的List<TerrestrialBranch>绑定给这个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; } } } } } }
相关文章推荐
- 限制CheckBoxList控件只能单选
- 限制CheckBoxList控件只能单选
- javascript控制服务器控件-js操作CheckBoxList实现全选、反选
- ASP.NET DEMO 12 : CheckBoxList 实现单选【转】
- CheckBox控件默认选中,提交时永远获得选中状态的实现代码
- 『JavaScript』限制Input只能输入数字实现思路及代码
- javascript控制服务器控件-js操作CheckBoxList实现全选、反选
- 实现onmouseover和onmouseout应用于RadioButtonList或CheckBoxList控件上
- CheckBox(复选按钮)/RadioButton(单选按钮)/BulletedList控件
- ASP.NET CheckBoxList 控件实现全选、反选、清除功能 利用js
- GridView控件的选择功能,代码实现CheckBox控件的全选、反选以及取消
- 用JS脚本实现CheckBoxList只能选择其中的两个
- 使用angular如何实现让checkbox单选,但只能选中一个
- TreeList 树形控件 实现带三种状态的CheckBox
- checkboxlist实现单选
- TreeList 树形控件 实现带三种状态的CheckBox
- 帧动画的完整实现: 代码直接演示
- asp.net中实现CheckBoxList单选功能
- 实现onmouseover和onmouseout应用于RadioButtonList或CheckBoxList控件上