How to get the CheckBoxlist Value using Javascript

A CheckBoxList renders as an HTML Table tag and does not have checked property. The child controls are CheckBoxes and do have the checked property.

There is no client-side "value" property in a CheckBoxList.

That is a server-side only property. You can only get the Text property of the ListItem (Item 1, Item 2, etc in this example).

Example:

<form id="form1" runat="server">
 <asp:CheckBoxList id="CheckBoxList1" runat="server">
  <asp:listitem Value="1">Item 1</asp:listitem>
  <asp:listitem Value="2">Item 2</asp:listitem>
  <asp:listitem Value="3">Item 3</asp:listitem>
 </asp:CheckBoxList>
 <input type="button" onclick="readCheckBoxList();" value="Read CheckBoxList" />
</form>


<script type="text/javascript">
<!--
function getCheckBoxListItemsChecked(elementId)
{
 var elementRef = document.getElementById(elementId);
 var checkBoxArray = elementRef.getElementsByTagName('input');
 var checkedValues = '';

 for (var i=0; i<checkBoxArray.length; i++)
 {
  var checkBoxRef = checkBoxArray[i];

  if ( checkBoxRef.checked == true )
  {
////////////
// AFAIK, you cannot get the value property of a ListItem in a CheckBoxList.
// You can only get the Text property, which will be in an HTML label element.
////////////


   var labelArray = checkBoxRef.parentNode.getElementsByTagName('label');

   if ( labelArray.length > 0 )
   {
    if ( checkedValues.length > 0 )
     checkedValues += ', ';

    checkedValues += labelArray[0].innerHTML;
   }
  }
 }

 return checkedValues;
}
function readCheckBoxList()
{
 var checkedItems = getCheckBoxListItemsChecked('<%= CheckBoxList1.ClientID %>');
 alert('Items checked: ' + checkedItems);
}
// -->
</script>

Comments

Popular posts from this blog

The model backing the 'MyDBContext' context has changed since the database was created. Either manually delete/update the database, or call Database.SetInitializer with an IDatabaseInitializer instance. For example, the DropCreateDatabaseIfModelChanges strategy will automatically delete and recreate the database, and optionally seed it with new data.

"This request has been blocked because sensitive information could be disclosed to third party web sites when this is used in a GET request. To allow GET requests, set JsonRequestBehavior to AllowGet."

Check/Uncheck all items in a CheckBoxList using Javascript