限制CheckBoxList控件只能单选实现代码及演示动画
程序员文章站
2024-03-04 13:57:53
开发要求，原本对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;
}
}
}
}
}
}
哈哈，看看做出来的效果：
为了你也能实现出来，可以参考下面的方法，第一是准备好一个对象“地支”（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;
}
}
}
}
}
}