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

Question

I have a set of flags created by the asp.net CheckBoxList control. I want to get the text that the user sees next to the control on the page.

With similar controls like RadioButtonList, I was able to get their values ​​in jQuery by doing the following:

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

and then loop and get the value:

 var whatIwant = selections[i].value; 

(In this case, this “value” will be the text I want).

But - CheckBoxList does it differently. For each ListItem there is not only an input, but also an html tag, for example:

 <input id="ctl00_ContentPlaceHolder1_ConsultedList_0" type="checkbox" name="ctl00$ContentPlaceHolder1$ConsultedList$0" /> <label for="ctl00_ContentPlaceHolder1_ConsultedList_0">Other service providers</label> 

As you can see, the input tag itself, which is my nicest little jQuery query, does not include the information I want: "Other service providers." This is on the tag label.

Can anyone think of a good solution for this - maybe a good way to get CheckBoxList to render the text I need in the input tag, or some clever jQuery to find labels matching the selected inputs?

Answer 1

You can use a selector that you already use (but just use clientId), then get the next sibling (shortcut) and get its text value

eg

 $("#" + Control.ClientId).next().text(); 

Or you can just get the label using it for the attribute

 $("label[for=" + Control.ClientId + "]").text(); 

Answer 2

You will need to iterate over the form elements, search for the label and capture its internal text, ASP.NET wraps the checkbox's ClientID with the identifier of the control, you can use the selector as shown below:

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

The HTML created 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 the example with ASP.NET markup created here .

Answer 3

Allows you to see if different ListItems have their own text and values? -

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

Case-1: - If the elements and values ​​of the CheckBoxList element are the 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 following js onclick function or where you need it (if you need a call in the 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 the values ​​of the CheckBoxList elements are specified in numerical order (for example, 1,2,3 ... n, of course, we often use this path)

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

Function

js will be lower

 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 the values ​​of the CheckBoxList element have some short forms / initials of its text (for example, for Mango I would say "M")

Here I used a trick to get the checkbox values ​​on the page so that it is easily accessible when writing a js script. That is, I use a hidden field with checkboxlist, which will receive all available values ​​in the checkboxlist during parsing html and store them on the page in its value. See 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 use html hiddenfield, not runat = server, since we do not need to write any code in cs using this hidden field. Here, the role of the hidden field is nothing more than an assistant that will provide comfort when writing js and getting flag values.

And now let's see what the script will look like: -

 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.

Answer 4

Try using Control.ClientID

source [MSDN]

for instance

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

Please refer to the source for additional parameters.