JQuery: getting the value/text/innerHtml of a checkbox in an ASP.NET CheckBoxList control

You will have to iterate over your form elements, searching for the label and grab its inner text, ASP .NET wraps the checkboxes inside a table with the ClientID of the control, you can use a selector like the following:

  var selection = [];
  $('#<%= CheckBoxList.ClientID %> :checked').each(function () {
    selection.push($(this).next('label').text());
  });

The HTML rendered by ASP .NET for CheckBoxLists looks like this:

<table id="check1" border="0">
    <tr>
        <td><input id="check1_0" type="checkbox" name="check1$0" />
                <label for="check1_0">Item 1</label></td>
    </tr><tr>
        <td><input id="check1_1" type="checkbox" name="check1$1" />
                <label for="check1_1">Item 2</label></td>
    </tr>
  .....
</table>

You can check an example with ASP .NET generated markup here.

Lets see If ListItems have their text and values different ? -

I have explained all possible cases of getting values/text of checkbox or checkboxlist as below:-

Case-1:- If CheckBoxList Items Text and Values are same

<asp:CheckBoxList ID="CheckBoxList1" runat="server" Width="180">
            <asp:ListItem Value="SQL" Text="">SQL</asp:ListItem>
            <asp:ListItem Value="ASP.Net" Text="">ASP.Net</asp:ListItem>
            <asp:ListItem Value="jQuery" Text="">jQuery</asp:ListItem>
            <asp:ListItem Value="MVC" Text="">MVC</asp:ListItem>
            <asp:ListItem Value="IIS" Text="">IIS</asp:ListItem>
        </asp:CheckBoxList>

call the below js function onclick or wherever you need (if required call in document.ready block)

function getChkVal1() {
            $chk_values = $("[id$=CheckBoxList1] input[type=checkbox]:checked").map(function (index, foElem) {
                return $(this).next().html();
            }).get();

            alert($chk_values);
        }

Case-2:- If CheckBoxList Items Values is in Numeric Order (e.g. 1,2,3 ...n Ofcourse, many times we use this way)

<asp:CheckBoxList ID="CheckBoxList2" runat="server" BackColor="#ffcccc" Width="180">
            <asp:ListItem Value="1" Text="">SQL</asp:ListItem>
            <asp:ListItem Value="2" Text="">ASP.Net</asp:ListItem>
            <asp:ListItem Value="3" Text="">jQuery</asp:ListItem>
            <asp:ListItem Value="4" Text="">MVC</asp:ListItem>
            <asp:ListItem Value="5" Text="">IIS</asp:ListItem>
        </asp:CheckBoxList>

js function would be as below

function getChkVal2() {
            $chk_values = $("[id$=CheckBoxList2] input[type=checkbox]").map(function (index, foElem) {
                if ($(this).is(":checked"))
                    return (index + 1);
            }).get();

            alert($chk_values);
        }

Case-3:- If CheckBoxList Items Values are some shortforms/initials of its text (e.g for Mango I would say "M")

Over here, I have used a trick to get the values of checkbox on page so that it can be easily accessible while writing js script. That is, I am using a hiddenfield with checkboxlist which will get all available values in checkboxlist during html parsing and store them on page in its value. See at below:-

<asp:CheckBoxList ID="CheckBoxList3" runat="server" BackColor="#ffccff" Width="180">
            <asp:ListItem Value="S" Text="">SQL</asp:ListItem>
            <asp:ListItem Value="A" Text="">ASP.Net</asp:ListItem>
            <asp:ListItem Value="J" Text="">jQuery</asp:ListItem>
            <asp:ListItem Value="M" Text="">MVC</asp:ListItem>
            <asp:ListItem Value="I" Text="">IIS</asp:ListItem>
        </asp:CheckBoxList>
        <input type="hidden" id="hdnChkBox3" value='<%=String.Join( ",", CheckBoxList3.Items.Cast<ListItem>().Select(item=>item.Value) ) %>' />

I am using a html hiddenfield not the runat=server one as we dont need to write any code in cs using this hiddenfield. Here role of hiddenfield is nothing but the helper, which will provide comfort while writing js and to get the values of checkbox.

And now, let see the how the script would be look:-

function getChkVal3() {
            $chk_items = $("#hdnChkBox3").val().split(","); // Get all checkboclist values from hiddenfield and convert it to array using split()
// so now we have ItemIndex and Values Index in Array as parallel            
$chk_values = $("[id$=CheckBoxList3] input[type=checkbox]").map(function (index, foElem) {
                if ($(this).is(":checked")) {
                    return ($chk_items[index]);     
                }
            }).get();

            alert($chk_values);
        }

Similarly you can do on radibuttonlist/radiobutton.

Try using Control.ClientID

source [MSDN]

For example

 var selected = $("input:checked[id*='" + control.clientid + "']");

Please refer source for more options.