您的位置：首页 > 编程技术 > ASP.NET  >  限制CheckBoxList控件只能单选实现代码及演示动画

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

 更新时间：2021年9月22日 10:17  点击：1796
开发要求，原本对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;
}
}
}
}
}
}
[!--infotagslink--]

相关文章

  • vue实现div单选多选功能

    这篇文章主要为大家详细介绍了vue实现div单选多选功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2020-07-16

  • 在.net中用CheckBoxList实现单选

    用CheckBoxList实现单选的原因是我觉得CheckBoxList控件页面展示效果要好看一些,需要的朋友可以参考下...2021-09-22

  • Gridview使用CheckBox全选与单选采用js实现同时高亮显示选择行

    Gridview使用CheckBox单选与全选功能再次进行简单演示，选中的行，使用高亮显示，让用户一目了然看到哪一行被选择了,在项目中很实用的，开发中的朋友们可要考虑一下哦...2021-09-22

  • 小程序实现自定义多层级单选和多选

    这篇文章主要为大家详细介绍了小程序实现自定义多层级单选和多选，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-04-21

  • MVC5下拉框绑定的方法（单选）

    这篇文章主要为大家详细介绍了MVC5下拉框绑定，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-09-22

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

    开发要求，原本对CheckBoxList控件是用来让用户多选的。但现在特殊要求，这个CheckBoxList控件限制只能单选,很多新手朋友可能不知从何下手，为此本文的出现时有必要的了，有需要的朋友可以了解此文...2021-09-22

  • asp.net listbox实现单选全选取消

    这篇文章主要介绍了asp.net listbox单选全选取消的应用,需要的朋友可以参考下...2021-09-22

  • 通过RadioButton对DataList控件进行单选实例说明

    本例实现通过RadioButton对DataList控件进行单选,aspx拉一个DataList控件，把RadioButton置于DataList的ItemTemplate模版内;在.aspx.cs内为DataList控件绑定数据,很实用的功能，感兴趣的朋友可以了解下啊...2021-09-22

  • Asp.net自定义控件之单选、多选控件

    这篇文章主要为大家详细介绍了Asp.net自定义控件之单选、多选控件的相关资料，感兴趣的小伙伴们可以参考一下...2021-09-22

  • gridview中实现radiobutton的单选示例

    radiobutton可以单选，于是想让gridview也可以实现，具体的思路及代码如下，感兴趣的朋友可以参考下...2021-09-22

  • Asp.net 中使用GridView控件实现Checkbox单选

    在GridView控件中，第0列有放一个CheckBox控件，现想实现对CheckBox进行单选，怎么实现呢？下面小编通过本文给大家分享Asp.net 中使用GridView控件实现Checkbox单选功能，一起看看吧...2021-09-22