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

时间: 2013-01-20

在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 =

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

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

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

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

jQuery获取checkboxlist的value值的方法

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

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

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

在.net中用CheckBoxList实现单选

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

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服务器端控件RadioButtonList,DropDownList,CheckBoxList的取值、赋值用法

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

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 Javascript获取CheckBoxList的value

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

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

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 jQuery 实例15 通过控件CustomValidator验证CheckBoxList

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

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

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

详解jQuery中的元素的属性和相关操作

元素属性 元素的属性中可以包含很多有用的信息,所以如何设置或得到属性中的值,就显得非常重要. jQuery 的 $.fn.attr 方法可以作为 setter 和 getter 使用,用来设置或获取属性的值.和 $.fn.css 用法类似,$.fn.attr 既可一次性接受单个属性,也可以接受多个属性(对象) : $('a').attr('href', 'allMyHrefsAreTheSameNow.html'); $('a').attr({ 'title' : 'all titles are

jquery中each循环的简单回滚操作

话不多说,请看代码: var ispass = true; var obj = new Object(); $.each(data,function(i,td){ var sum=data[i].sum; var num=data[i].num; var id=data[i].num; if(num>sum){ ispass=false; alert("数量不能大于总数量!"); sum+=num; return false; } obj[id]=sum; }) if(!ispa

jquery中如何获得服务器控件实现思路

jquery中 复制代码 代码如下: $("#<%=StoreName.ClientID %>").focus(function() { $("#<%=Label5.ClientID %>").val("请输入真实的店铺名称"); $("#<%=Label5.ClientID %>").css("color", "#666"); }); html中 复

jQuery中过滤器的基本用法示例

本文实例讲述了jQuery中过滤器的基本用法.分享给大家供大家参考,具体如下: HTML正文: <input type="button" id="b1" value="偶数行红色"><br> <input type="button" id="b2" value="奇数行绿色"><br> <table border=1 width=&q

jQuery中extend函数简单用法示例

本文实例讲述了jQuery中extend函数简单用法.分享给大家供大家参考,具体如下: var result=$.extend({},item,item1); extend给对象添加新的属性:js插件经常使用来配置参数 {}:item和item1合并后的结果 item:默认属性 item1:新增属性,如果item1和item属性重合则会覆盖item1中的属性 <span id="Test"></span> var item={"name":&

JQuery中each()的使用方法说明

each()函数是基本上所有的框架都提供了的一个工具类函数,通过它,你可以遍历对象.数组的属性值并进行处理.jQuery和jQuery对象都实 现了该方法,对于jQuery对象,只是把each方法简单的进行了委托:把jQuery对象作为第一个参数传递给jQuery的each方法.换句话 说:jQuery提供的each方法是对参数一提供的对象的中所有的子元素逐一进行方法调用.而jQuery对象提供的each方法则是对jQuery内 部的子元素进行逐个调用. each函数根据参数的类型实现的效果不完

jquery中的ajax异步上传

找了好久终于在网上找到了ajax异步上传文件的方法,不过网上大多数是php的 ,我改为struts2写的 大同小异,希望对学习java的人有一定的帮助.我上传的是音乐文件. ajaxfileupload.js这个js文件是主要文件,一定要导入. jsp页面 ,其中我还做了div的隐藏***************************** <%@ page language="java" import="java.util.*" pageEncoding=&

解析prototype,JQuery中跳出each循环的方法

复制代码 代码如下: function chk(){        var flag=true;        var msg='';        var tips={'username':'姓名','tel':'电话','company':'公司名称','loupan_name':'楼盘名','sdate':'团购时间','content_1':'团购内容'};        $$('.required').each(function(el){            if($F(el).bl

jQuery中prevAll()方法用法实例

本文实例讲述了jQuery中prevAll()方法用法.分享给大家供大家参考.具体分析如下: 此方法查找匹配元素集合之前所有的同辈元素. 同辈元素集合可以通过选择器进行筛选. 语法结构: 复制代码 代码如下: $("selector").prevAll(expr) 参数列表: 参数 描述 expr 可选.用于过滤的表达式. 实例代码: 实例一: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta cha