How to Get the CheckBoxlist Value using JavaScript?

Introduction

We have to update the checkboxlist into a new control say name:"CheckBoxListExCtrl" which can inherit checkboxlist property.

Background

CheckBoxList extension.

Using the Code

Create a new control by the following steps.

Step 1

Create a class library project:

using System;
using System.Collections.Generic; 
using System.Text; 
using System.Globalization; 
using System.Web.UI; 
using System.Web.UI.WebControls; 
namespace CheckBoxListExCtrl 
{ 
public class CheckBoxListExCtrl :CheckBoxList, IRepeatInfoUser 
{  
 void IRepeatInfoUser.RenderItem(ListItemType itemType, 
	int repeatIndex, RepeatInfo repeatInfo, HtmlTextWriter writer) 
 {
     writer.WriteBeginTag("input"); 
     writer.WriteAttribute("type", "checkbox"); 
     writer.WriteAttribute("name", UniqueID); 
     writer.WriteAttribute("id", ClientID + "_" + 
	repeatIndex.ToString(NumberFormatInfo.InvariantInfo)); 
     writer.WriteAttribute("value", Items[repeatIndex].Value); 
     System.Web.UI.AttributeCollection attrs = Items[repeatIndex].Attributes; 
     foreach (string key in attrs.Keys) 
     {
        writer.WriteAttribute(key, attrs[key]);
     }
     writer.Write(">"); 
     writer.Write(Items[repeatIndex].Text);
  }
} 
}  

Step 2

Build it into a *.dll file,and add it to toolbox of VS.NET. Then you can use it from your project.

Step 3

When we add this control into *.aspx page, the& following code is generated.

<checkboxlistexctrl id="CheckBoxListExCtrl1" runat="server"></checkboxlistexctrl>

Step 4

From the code behind, we have to write code to bind the CheckBoxListExCtrl control.

protected void PopulateCheckBoxListExCtrl() 
{
   CheckBoxListExCtrl.DataSource = DtRecords;//DataTable DtRecords from DB
   CheckBoxListExCtrl.DataTextField ="Column1"; 
   CheckBoxListExCtrl.DataValueField ="Column2"; 
   CheckBoxListExCtrl.DataBind();
}

Step 5

Then we can get the checkbox list value easily by:

document.getElementByID("CheckBoxListExCtrl").value

History

• 19^th September, 2007: Initial post