限制CheckBoxList控件只能单选

转载

mob604756e72afd 2013-01-22 21:56:00

文章标签 JavaScript function js CheckBoxList Checked 文章分类 代码人生

开发要求，原本对CheckBoxList控件是用来让用户多选的。但现在特殊要求，这个CheckBoxList控件限制只能单选。

哈哈，看看Insus.NET做出来的效果：

限制CheckBoxList控件只能单选_JavaScript

为了你也能实现出来，可以参考下面的方法，第一是准备好一个对象“地支”（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>来存储这十二个对象：

View Code

 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"

View Code

<asp:CheckBoxList ID="CheckBoxListTerrestrialBranch" runat="server" RepeatColumns="6" RepeatDirection="Horizontal"></asp:CheckBoxList>

把刚才准备好的List<TerrestrialBranch>绑定给这个CheckBoxList控件：

View Code

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>之内。

View Code

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