Thursday, December 22

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.

CheckBox Text
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
 

No comments:

Post a Comment

Please don't spam, spam comments is not allowed here.

ShibashishMnty
shibashish mohanty