时间:2021-05-25
开发要求,原本对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;
}
}
}
}
}
}
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
实现效果演示:实现代码及注释:楼层跳跃式的页面布局*{margin:0;padding:0;}body,html{height:100%;}ul{list-st
Spring作用:开发中常用的动画效果及自定义转场动画演示介绍SpringView最重要的一个类,是一个继承自UIView的控件,所有的动画属性,都是围绕着这个
Android代码写控件代替XML简单实例简单的一个Button控件的练习。实现代码:Buttonbtn=newButton(HandlerToActivity
 具有不同标记颜色和大小的散点图演示。演示结果:实现代码:importnumpyasnpimportmatplotlib.pyplotaspltimp
本文实例为大家分享了JS面向对象之单选框实现代码,供大家参考,具体内容如下描述:JS面向对象——单选框的实现效果:实现:Utile.js(function(){