CODEWITHSUNDEEP
jqueryasp.net
nav100
nav100

Reputation: 3133

Get the Checkboxlist value when unchecked Client-Side

How to get the value of Checkboxlist value when item is unchecked? I tried the following code but I am not getting the value. Please let me know.

JQuery
----------------

    $(document).ready(function () {
        $("#<%=chkboxTypeList.ClientID%> input[type=checkbox]").click(function () {

            if (!this.checked) {
               alert($(this).val());
            }

        });

.aspx
-------------------
                        <asp:CheckBoxList ID="chkboxTypeList" runat="server" RepeatDirection="Horizontal">
                            <asp:ListItem Text="TEST 1" Value="1"></asp:ListItem>
                            <asp:ListItem Text="TEST 2" Value="2"></asp:ListItem>
                            <asp:ListItem Text="TEST 3" Value="3"></asp:ListItem>
                        </asp:CheckBoxList>

Upvotes: 1

Views: 1147

Answers (1)

BenG
BenG

Reputation: 15154

The values of checkboxlist are stored in Viewstate and not rendered clientside.

One way of getting the value client side is using a Attribute.

<asp:CheckBoxList ID="chkboxTypeList" runat="server" RepeatDirection="Horizontal">
     <asp:ListItem Text="TEST 1" Value="1" ClientValue="1"></asp:ListItem>
     <asp:ListItem Text="TEST 2" Value="2" ClientValue="2"></asp:ListItem>
     <asp:ListItem Text="TEST 3" Value="3" ClientValue="3"></asp:ListItem>
</asp:CheckBoxList>

This is then rendered like:-

<td>
  <span clientvalue="2">
    <input id="chklstStates_1" type="checkbox" name="chklstStates$1">
    <label for="chklstStates_1">TEST 2</label>
  </span>
</td>

Then use:-

$(document).ready(function () {

    $("#<%=chkboxTypeList.ClientID%> input[type=checkbox]").change(function () {

        var value = $(this).parent().attr('clientvalue');

        if (!this.checked) {
           alert(value);
        }

    });
});

Upvotes: 2

Related Questions