Tuesday, December 4

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:-

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
 
 

No comments:

Post a Comment

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

ShibashishMnty
shibashish mohanty