JQuery：获取 ASP.NET CheckBoxList 控件中复选框的值/文本/innerHtml
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1286317/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JQuery: getting the value/text/innerHtml of a checkbox in an ASP.NET CheckBoxList control
提问by MGOwen
I've got a bunch of checkboxes generated by an asp.net CheckBoxList control. I want to get the text the user sees next to the control on the page.
我有一堆由 asp.net CheckBoxList 控件生成的复选框。我想获取用户在页面上的控件旁边看到的文本。
With similar controls, like RadioButtonList, I've been able to get their values in jQuery by doing this:
使用类似的控件，例如 RadioButtonList，我已经能够通过执行以下操作在 jQuery 中获取它们的值：
var selected = $("input:checked[id*='" + Control.id + "']");
and then looping through and getting the value:
然后循环并获取值：
var whatIwant = selections[i].value;
(In this case, that "value" will be the text I want).
（在这种情况下，该“值”将是我想要的文本）。
But - CheckBoxList renders differently. For each ListItem there's not only the input, but an html tag like so:
但是 - CheckBoxList 呈现方式不同。对于每个 ListItem，不仅有输入，还有一个 html 标签，如下所示：
<input id="ctl00_ContentPlaceHolder1_ConsultedList_0" type="checkbox" name="ctl00$ContentPlaceHolder1$ConsultedList$("#" + Control.ClientId).next().text();
" />
<label for="ctl00_ContentPlaceHolder1_ConsultedList_0">Other service providers</label>
As you can see, the input tag itself, which is what my nice little jQuery query finds, doesn't include the info I want: "Other service providers". That's on the label tag.
如您所见，输入标签本身，即我的漂亮的 jQuery 小查询所找到的，不包括我想要的信息：“其他服务提供者”。那是在标签标签上。
Can anyone think of a good solution for this - maybe a good way of making the CheckBoxList render the text I need in the input tag, or some clever jQuery to find the labels that correspond to the selectedinputs?
谁能想到一个好的解决方案 - 也许是让 CheckBoxList 在输入标签中呈现我需要的文本的好方法，或者一些聪明的 jQuery 来找到与所选输入相对应的标签？
回答by redsquare
You can use the selector you are already using (but just use the clientId), then get the next sibling (the label) and get its text value
您可以使用您已经在使用的选择器（但只使用 clientId），然后获取下一个兄弟（标签）并获取其文本值
e.g
例如
$("label[for=" + Control.ClientId + "]").text();
Or you can just get the label by using its for attribute
或者你可以使用它的 for 属性来获取标签
var selection = [];
$('#<%= CheckBoxList.ClientID %> :checked').each(function () {
selection.push($(this).next('label').text());
});
回答by CMS
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:
您必须遍历表单元素，搜索标签并获取其内部文本，ASP .NET 将复选框包装在带有控件的 ClientID 的表格中，您可以使用如下所示的选择器：
<table id="check1" border="0">
<tr>
<td><input id="check1_0" type="checkbox" name="check1<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>
" />
<label for="check1_0">Item 1</label></td>
</tr><tr>
<td><input id="check1_1" type="checkbox" name="check1" />
<label for="check1_1">Item 2</label></td>
</tr>
.....
</table>
The HTML rendered by ASP .NET for CheckBoxLists looks like this:
ASP .NET 为 CheckBoxLists 呈现的 HTML 如下所示：
function getChkVal1() {
$chk_values = $("[id$=CheckBoxList1] input[type=checkbox]:checked").map(function (index, foElem) {
return $(this).next().html();
}).get();
alert($chk_values);
}
You can check an example with ASP .NET generated markup here.
您可以在此处查看带有 ASP .NET 生成标记的示例。
回答by ramby
Lets see If ListItems have their text and values different ? -
让我们看看 ListItems 的文本和值是否不同？——
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
案例 1：- 如果 CheckBoxList 项目文本和值相同
<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>
call the below js function onclick or wherever you need (if required call in document.ready block)
调用下面的 js 函数 onclick 或任何你需要的地方（如果需要在 document.ready 块中调用）
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-2:- If CheckBoxList Items Values is in Numeric Order (e.g. 1,2,3 ...n Ofcourse, many times we use this way)
案例 2：- 如果 CheckBoxList Items Values 是数字顺序（例如 1,2,3 ...n 当然，很多时候我们使用这种方式）
<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) ) %>' />
js function would be as below
js函数如下
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);
}
Case-3:- If CheckBoxList Items Values are some shortforms/initials of its text (e.g for Mango I would say "M")
案例 3：- 如果 CheckBoxList 项目值是其文本的一些缩写/首字母（例如，对于 Mango，我会说“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:-
在这里，我使用了一个技巧来获取页面上复选框的值，以便在编写 js 脚本时可以轻松访问它。也就是说，我正在使用带有复选框列表的隐藏字段，它将在 html 解析期间获取复选框列表中的所有可用值，并将它们存储在页面上的值中。见下文：-
var selected = $("input:checked[id*='" + control.clientid + "']");
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.
我使用的是 html 隐藏字段而不是 runat=server 一个，因为我们不需要使用这个隐藏字段在 cs 中编写任何代码。这里hiddenfield的作用就是帮助者，它会在编写js和获取checkbox的值时提供便利。
And now, let see the how the script would be look:-
现在，让我们看看脚本的外观：-
##代码##Similarly you can do on radibuttonlist/radiobutton.
同样，您可以对radibuttonlist/radiobutton 进行操作。
回答by ChaosPandion
Try using Control.ClientID
尝试使用 Control.ClientID
source [MSDN]
来源 [MSDN]
For example
例如
##代码##Please refer source for more options.
请参阅来源以获取更多选项。
