[RESOLVED]Get Checkbox value and text

I have a checkbox list like this 

<asp:CheckBoxList ID="Checkbox_Cat_2B1" runat="server" Height="350px" Width="150px">
                        <asp:ListItem Value="Cat 1">Cat 1</asp:ListItem>
                        <asp:ListItem Value="Cat 2">Cat 2</asp:ListItem>
                        <asp:ListItem Value="Cat 3">Cat 3</asp:ListItem>
                        <asp:ListItem Value="Cat 4">Cat 4</asp:ListItem>
                        <asp:ListItem Value="Cat 5">Cat 5</asp:ListItem>
                        <asp:ListItem Value="Cat 6">Cat 6</asp:ListItem>
                        <asp:ListItem Value="Cat 7">Cat 7</asp:ListItem>
                        <asp:ListItem Value="Cat 8">Cat 8</asp:ListItem>
                    </asp:CheckBoxList>

I want to get the value and the text from the selected checkbox using jquery. How I am suppose to do this. Can any one help me please.

You may want to examine the "View Source" of the page to see the rendered control for the same.

You can then treat them like normal HTML controls and can use JQuery functions by using it’s IDs.

However a lot of goodies are in this article:

http://techbrij.com/checkboxlist-jquery-asp-net-operations

This should help you.

 

$( "#Checkbox" ).val()

gives you the value

You could just use a function like the following to grab your CheckBoxList and find any checked elements within it : 

<!-- Example jQuery Reference -->
<script src="http://localhost:62852/Scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
        $(function () {
            // When your GetCheckedValue button is clicked
            $("#GetCheckedValue").click(function (e) {
                // Loop through all of the checked elements in your CheckBoxList and output their values
                $("#<%= Checkbox_Cat_2B1.ClientID %> :checkbox:checked").each(function () {
                    // Alert the value
                    alert($(this).val());
                });
            });
        });
</script>

You can see a complete example below and
an interactive example here
:

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="http://localhost:62852/Scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript">
        $(function () {
            // When your GetCheckedValue button is clicked
            $("#GetCheckedValue").click(function (e) {
                // Loop through all of the checked elements in your CheckBoxList and output their values
                $("#<%= Checkbox_Cat_2B1.ClientID %> :checkbox:checked").each(function () {
                    // Alert the value
                    alert($(this).val());
                });
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:CheckBoxList ID="Checkbox_Cat_2B1" runat="server" Height="350px" Width="150px">
                        <asp:ListItem Value="Cat 1">Cat 1</asp:ListItem>
                        <asp:ListItem Value="Cat 2" Selected="True">Cat 2</asp:ListItem>
                        <asp:ListItem Value="Cat 3">Cat 3</asp:ListItem>
                        <asp:ListItem Value="Cat 4">Cat 4</asp:ListItem>
                        <asp:ListItem Value="Cat 5">Cat 5</asp:ListItem>
                        <asp:ListItem Value="Cat 6">Cat 6</asp:ListItem>
                        <asp:ListItem Value="Cat 7">Cat 7</asp:ListItem>
                        <asp:ListItem Value="Cat 8">Cat 8</asp:ListItem>
        </asp:CheckBoxList>

        <button id="GetCheckedValue" onclick="return false;">Get Checked Value</button>
    </div>
    </form>
</body>
</html>

The only thing that makes this any trickier than just using a normal CheckBox input is that the ASP.NET CheckBoxList Control actually renders a table that contains a checkbox <input> element on each row (along with the Text for the specific item).
This is why you have to use jQuery to target the table itself (using the ClientID property of your CheckBoxList) and then find any checked items beneath it (using :checkbox:checked). Once you have those, you can simply loop through them and
output your values.

Leave a Reply