限制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;
}
}
}
}
}
}

赞 (0)

相关推荐

  • CheckBoxList多选样式jquery、C#获取选择项

    复制代码 代码如下: .checkboxlist label { margin-right: 20px; } 复制代码 代码如下: var label; $("#ddlplatform input:checkbox:checked").each(function () { label += $(this).next().html(); }); 复制代码 代码如下: <asp:CheckBoxList ID="ddlplatform" runat="s

  • 在js中判断checkboxlist(.net控件客户端id)是否有选中

    在提交添加或修改内容时,需要对关键数据进行判空处理,如何在js中判断checkboxlist是否有选择项呢? 具体操作如下: 复制代码 代码如下: var CheckBox = document.getElementById("<%=cblWeek.ClientID %>").getElementsByTagName("INPUT"); if (CheckBox != undefined) { var i = 0; var j = 0; for (i =

  • JQuery中对服务器控件 DropdownList, RadioButtonList, CheckboxList的操作总结

    一: DropDownList ------------------------------------------------------------------------------------------- 在使用 JQuery 进行遍历操作时, $("input").each(function(i) { ...... } 当操作对象的类型为 dropdownlist时:(备注:在firefox下DropDownList的类型为"select-one") 获

  • asp.net Javascript获取CheckBoxList的value

    以后我会陆续的写出这段时间中学习到的东西,与大家一起分享.这篇文章也算是工作中的一个笔记吧,希望给遇到同样问题的朋友,一点小小的帮助. 在 开发工作中,因为要做用到CheckBoxList在客户端用js操作,无论js怎样调试,就是无法获取value的值,很是郁闷,后来Google了下,去了趟CodeProject,算是幸运的.我们在网页上放置一下代码: 复制代码 代码如下: <asp:CheckBoxList runat="server" ID="chkDemo&quo

  • CheckBoxList两列并排编译为表格显示具体实现

    复制代码 代码如下: <asp:CheckBoxList ID="DDLGroups" runat="server" RepeatLayout="Table" RepeatColumns="2" RepeatDirection="Horizontal" style="border-collapse:collapse; line-height:18px;margin-left:2px;&quo

  • jQuery获取checkboxlist的value值的方法

    CheckboxList是服务器控件,绑定数据容易,服务器端获取选中值也容易.但是生成的静态页面居然没有ListItem的Value值,所以默认情况下用js在页面中是取不到ListItem的值的.至于为什么不显示value值,我也不清楚,本篇给出一个用jQuery获取checkboxlist值的方法. 先看看原始的页面html代码: <asp:CheckBoxList runat="server" ID="listTest"> </asp:Chec

  • js操作CheckBoxList实现全选/反选(在客服端完成)

    对于CheckBoxList控件来说,一方面要实现大量数据在服务器端的绑定工作,另一方面往往要求实现全选.反选等功能.虽然可以在服务器端完成这方面的工作,但这样一个简单的工作似乎更应该在客户端完成. 具体方法: 在页面中放入一个CheckBoxList控件,并添加几项,用来分析其产生的HTML代码,这样在使用js进行 动态控制时,将会非常清晰其测试代码如下所示: 复制代码 代码如下: <asp:CheckBoxListID="CheckBoxList1"runat="s

  • 在.net中用CheckBoxList实现单选

    在.net中提供了Radiobuttonlist来实现单选的,但是我一直喜欢用CheckBoxList 原因我觉得CheckBoxList 控件页面展示效果要好看一些,呵呵 这里是先CheckBoxList 实现单选采用了控件的点击事件 调用js来控制单选的 例如页面如下: 复制代码 代码如下: <asp:CheckBoxList ID="CheckBoxList1" BorderWidth="1" runat="server" Repea

  • ASP.NET中CheckBoxList复选框列表控件详细使用方法

    可以使用两种类型的 ASP.NET 控件将复选框添加到 Web 窗体页上:单独的 CheckBox 控件或 CheckBoxList 控件.两种控件都为用户提供了一种输入布尔型数据(真或假.是或否)的方法. 本文主要介绍CheckBoxList,不言而喻,看到List就知道是一个列表(集合),一个控件可以包含多个CheckBox,下面让我们来看看具体的用法. 1.绑定数据 复制代码 代码如下: this.lngCatalogID.DataSource = dt; //这里我绑到DataTable

  • ASP.NET jQuery 实例5 (显示CheckBoxList成员选中的内容)

    ASP.NET jQuery 实例5 (显示CheckBoxList成员选中的内容)

    界面代码: 复制代码 代码如下: <form id="form1" runat="server"> <div align="left"> <fieldset style="width: 400px; height: 150px"> <p> 请选择语言</p> <asp:CheckBoxList ID="ckbListPro" runat=&q

  • asp.net CheckBoxList各项最小宽度CSS样式(兼容性good)

    ASP.NET中,CheckBoxList里的选择都是自动宽度的,属性时没有设置各项宽度的设置. 参考了一下网上的最小宽度样式, 复制代码 代码如下: /* 最小寬度 */ .min_width{min-width:300px; /* sets max-width for IE */ _width:expression(document.body.clientWidth < 300 ? "300px" : "auto"); } 写成如下: 复制代码 代码如下:

  • ASP.NET jQuery 实例6 (实现CheckBoxList成员全选或全取消)

    ASP.NET jQuery 实例6 (实现CheckBoxList成员全选或全取消)

    这章内容比较简单,直接上页面代码: 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Recipe6.aspx.cs" Inherits="Recipe6" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt

  • ASP.NET中用js取CheckBoxList中值的方法实例

    ASP.NET中用js取CheckBoxList中值的方法实例

    做的一些项目都比较小,而且时间紧,有好多东西都没来得急总结,趁这会还有点时间把前面项目中的用到的知识点分享下,只为以后方便使用.前台页面代码 复制代码 代码如下: <!--关键字-->    <div id="keyWordsDiv" style="border: 2px solid #6FA1D9; display: none; position: absolute;        top: 0px; left: 0px; width: 260px; he

  • ASP.NET服务器端控件RadioButtonList，DropDownList，CheckBoxList的取值、赋值用法

    这三个控件都有一个Items集合,可以用 RepeatLayout 和 RepeatDirection 属性来控制列表的呈现形式.如果 RepeatLayout 的值为 Table,那么将在表中呈现列表.如果设置成 Flow,那么将在没有任何表结构的情况下呈现列表.默认情况下,RepeatDirection 的值为 Vertical.将此属性设置成 Horizontal 将会使列表水平呈现. RadioButtonList:控件提供已选中一个选项的单项选择列表(数据源单选).与其他列表控件相似,

  • ASP.NET jQuery 实例15 通过控件CustomValidator验证CheckBoxList

    ASP.NET jQuery 实例15 通过控件CustomValidator验证CheckBoxList

    首先看下界面代码: 复制代码 代码如下: <form id="form1" runat="server"> <div align="center"> <fieldset style="width: 350px; height: 200px;"> <table border="0" cellpadding="3" cellspacing="

随机推荐