How to get Checkboxlist value with comma Separator by jquery

Introduction:-

                     Here I have explained How to get Checkboxlist value with comma Separator using  jquery  in asp.net.

Description:-

                     In my previous article I have explained Capture Button’s ClickEvent of User Control in the Asp.Net Page,Publish events for user control inAsp.Net using delegates, Dynamically create multiple web user control in a Page with Click event functionality , How to bind a repeater control in asp.net. ,How to bind state by selecting country dropdownlist using WebMethod in Asp.net ,How to use google map in asp.net

Now here I will explain how you can get the values of checkboxlist using jQuery.As many you can get the output,for example if you check 3 checkboxes then you will get 3 outputs with comma separator.

To test this follow the below process.

·         First take one checkboxlist and one hiddenfield to store data as below

 

<asp:CheckBoxList CssClass="test" ID="ChkListPetsAllowed" runat="server">

 

<asp:ListItem>Cat</asp:ListItem>

 

<asp:ListItem>Dog</asp:ListItem>

 

<asp:ListItem>Horse</asp:ListItem>

 

<asp:ListItem>None</asp:ListItem>

 

</asp:CheckBoxList>

 

<asp:HiddenField ID="hdnPetsAllowed" runat="server" />

·         Take any jquery plugin but I have taken following one

 

<script src="Scripts/jquery-1.7.1.min.js"></script>

·         Here is the Jquery function ,you just write like this you will get the output.

 

<script type="text/javascript">

 

jQuery("#<%=ChkListPetsAllowed.ClientID%>").click(function () {

 

debugger;

 

var elementRef =

document.getElementById('ctl00_ContentPlaceHolder1_ChkListPetsAllowed');

 

var checkBoxArray = elementRef.getElementsByTagName('input');

 

var checkedValues = '';

 

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

 

var checkBoxRef = checkBoxArray[i];

 

if (checkBoxRef.checked == true) {

 

var labelArray =

checkBoxRef.parentNode.getElementsByTagName('label');

 

if (labelArray.length > 0) {

 

if (checkedValues.length > 0)

 

checkedValues += ',';

 

checkedValues += labelArray[0].innerHTML.toString();

 

jQuery("#<%=hdnPetsAllowed.ClientID%>").val(checkedValues);

 

alert(jQuery("#<%=hdnPetsAllowed.ClientID%>").val());

 

if (checkedValues == 'Other') {

 

args.IsValid = !(args.Value == "")

 

alert('Shibashish');

 

}

}

else {

 

args.IsValid = true;

 

}

}

}

});

});

</script>

I hope you will like this article.

Keep coding…
 
Thanks Shibashish Mohanty