Month: February 2014

How to get the checkboxlist text using Javacsript in asp.net

Chandradev4 Comments

Hi

So many time we will get scenario to read the checkbox list using JavaScript, we can do this task like this

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default3.aspx.vb" Inherits="Test_Default3" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<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) {
// for getting the value
var value1 = checkBoxArray[i].value;
alert(value1)
// For getting the text value

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('<%= CheckBoxList2.ClientID %>');
alert(checkedItems);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>

<asp:CheckBoxList ID="CheckBoxList2"  runat="server">
<asp:ListItem>C1</asp:ListItem>
<asp:ListItem>C2</asp:ListItem>
</asp:CheckBoxList>
</div>
<input type="button" onclick="readCheckBoxList();" value="Read CheckBoxList" />

</form>
</body>
</html>