欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

限制CheckBoxList控件只能单选实现代码及演示动画

程序员文章站 2024-03-05 17:36:19
开发要求,原本对checkboxlist控件是用来让用户多选的。但现在特殊要求,这个checkboxlist控件限制只能单选。 哈哈,看看做出来的效果: 为了你也能实现出来...
开发要求,原本对checkboxlist控件是用来让用户多选的。但现在特殊要求,这个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;
}
}
}

用数据填充这个对象,并用泛型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;
}
}
}
}
}
}