user2998990 user2998990 - 2 months ago 13
jQuery Question

get selected checkboxlist list items value

$(document).ready(function () {
var values = '';

$('#MainContent_ddl input[type=checkbox]:checked').each(function () {
if (values.length == 0) {
values = this.parent().attr('Value');
else {
values += "," + $('label[for=' + + ']').html();
return false;


The above code I am trying to get the currently selected checkboxlist items value which I have defined as follows

<asp:CheckBoxList ID="ddl" runat="server" AutoPostBack="true"
Style="padding-top: 150px;">

<asp:ListItem Text="ABC" Value="0"></asp:ListItem>
<asp:ListItem Text="DEF" Value="1"></asp:ListItem>
<asp:ListItem Text="GHI" Value="2"></asp:ListItem>
<asp:ListItem Text="JKL" Value="3"></asp:ListItem>


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

Rendered checkboxlist

<td><input id="MainContent_ddl_0" type="checkbox" name="ctl00$MainContent$ddl$0" onclick="javascript:setTimeout(&#39;__doPostBack(\&#39;ctl00$MainContent$ddl$0\&#39;,\&#39;\&#39;)&#39;, 0)" value="0" /><label for="MainContent_ddl_0">ABC</label></td>
<td><input id="MainContent_ddl_1" type="checkbox" name="ctl00$MainContent$ddl$1" onclick="javascript:setTimeout(&#39;__doPostBack(\&#39;ctl00$MainContent$ddl$1\&#39;,\&#39;\&#39;)&#39;, 0)" value="1" /><label for="MainContent_ddl_1">DEF</label></td>
<td><input id="MainContent_ddl_2" type="checkbox" name="ctl00$MainContent$ddl$2" onclick="javascript:setTimeout(&#39;__doPostBack(\&#39;ctl00$MainContent$ddl$2\&#39;,\&#39;\&#39;)&#39;, 0)" value="2" /><label for="MainContent_ddl_2">GHI</label></td>
<td><input id="MainContent_ddl_3" type="checkbox" name="ctl00$MainContent$ddl$3" onclick="javascript:setTimeout(&#39;__doPostBack(\&#39;ctl00$MainContent$ddl$3\&#39;,\&#39;\&#39;)&#39;, 0)" value="3" /><label for="MainContent_ddl_3">JKL</label></td>

How can I get the currently selected value and store it in a hidden field. Where Am I going wrong.

Jai Jai

As per your statement:
I am trying to get the currently selected checkboxlist items value

Try this

values = $(this).val()


values = this.value;

You can do something like this:

    var value;

    $('input[type=checkbox]').change(function () {
           value = this.value; // put the value of checked only
<script src=""></script>
<input type='checkbox' value='0' />
<input type='checkbox' value='1' />
<input type='checkbox' value='2' />
<input type='checkbox' value='3' />
<input type='checkbox' value='4' />

Because in your script you intialized your var with a "" blank string value to all the checked input type checkboxes, so value gets concatenated with the previous values.

Instead you have to use this in .change() event and check if element is checked if true then update the var value with the current clicked element value and send it to the backend code.