Get checkboxlist text using javascript

In this article we will explore how to get checkbox text in javascript. CheckBoxList text property lays out the text as html lable in the page.


Let's see how we can achieve it:

Step 1: Place below html fragment inside form tag of aspx page.
<div>
      <asp:CheckBoxList ID="chkList" runat="server" onclick="GetSelectedValue();">
      </asp:CheckBoxList></div><br />
<strong>Selected checkbox value: </strong><div id="divChkBoxText"></div>

Step 2: Place below code snippet in page_load to bind data to checkboxlist.

ListItem lst;
string text;
for (int i = 0; i < 10; i++)
{
      text = i.ToString() + " Checkbox in DDL";
      lst = new ListItem(text, i.ToString());
      chkList.Items.Add(lst);
}

Step 3: Now place below javascript in the aspx page.

<script language="javascript">
function GetSelectedValue() {
      var chkBox = document.getElementById("<%=chkList.ClientID%>");
      var checkbox = chkBox.getElementsByTagName("input");
      var objTextBox = document.getElementById("<%=txtChkValue.ClientID%>");
      var counter = 0;
      objTextBox.value = "";
      for (var i = 0; i < checkbox.length; i++) {
            if (checkbox[i].checked) {
                  var chkBoxText = checkbox[i].parentNode.getElementsByTagName('label');
                  if (objTextBox.value == "") {
                        objTextBox.value = chkBoxText[0].innerHTML;
                  }
                  else {
                        objTextBox.value = objTextBox.value + ", " + chkBoxText[0].innerHTML;
                  }
            }
      }
}

</script>


Live Demo
This ends the article of getting text of checkboxlist using javascript.
Like us if you find this post useful. Thanks! 
Shibashish mohanty