JQuery:获取ASP.NET CheckBoxList控件中复选框的值/text/innerHtml
我有一堆由asp.net CheckBoxList控件生成的复选框。我想得到用户在页面上控件旁边看到的文本。
使用类似的控件(如RadioButtonList )，通过这样做，我能够在jQuery中获得它们的值：
var selected = $("input:checked[id*='" + Control.id + "']");然后遍历并得到值：
var whatIwant = selections[i].value;(在本例中，"value“将是我想要的文本)。
但是- CheckBoxList呈现方式不同。对于每个ListItem，不仅有输入，而且有如下所示的html标记：
<input id="ctl00_ContentPlaceHolder1_ConsultedList_0" type="checkbox" name="ctl00$ContentPlaceHolder1$ConsultedList$0" />
<label for="ctl00_ContentPlaceHolder1_ConsultedList_0">Other service providers</label>正如您所看到的，输入标记本身(这就是我漂亮的小jQuery查询所发现的)不包括我想要的信息：“其他服务提供者”。标签上有。
有人能想出一个很好的解决方案吗--也许是让CheckBoxList呈现我在输入标签中需要的文本的好方法，或者是一些聪明的jQuery来找到与所选输入对应的标签？
回答 4
Stack Overflow用户
发布于 2009-08-17 05:51:26
您可以使用您已经使用的选择器(但只需使用clientId)，然后获取下一个兄弟级(标签)并获取其文本值。
e.g
$("#" + Control.ClientId).next().text();或者您可以使用它的for属性来获取标签。
$("label[for=" + Control.ClientId + "]").text();Stack Overflow用户
发布于 2009-08-17 06:09:58
您必须遍历表单元素，搜索标签并获取其内部文本，ASP .NET用控件的ClientID包装表中的复选框，您可以使用如下所示的选择器：
var selection = [];
$('#<%= CheckBoxList.ClientID %> :checked').each(function () {
selection.push($(this).next('label').text());
});ASP .NET为CheckBoxLists呈现的HTML如下所示：
<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>可以使用ASP .NET生成的标记这里检查示例。
Stack Overflow用户
发布于 2014-07-15 15:39:18
让我们看看ListItems的文本和值是否不同？-
我已解释了所有可能获得值/复选框文本或复选框列表的情况如下：
案例-1：-如果CheckBoxList项、文本和值是相同的
<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>点击以下js函数或任何您需要的地方(如果需要，在document.ready块中调用)
function getChkVal1() {
$chk_values = $("[id$=CheckBoxList1] input[type=checkbox]:checked").map(function (index, foElem) {
return $(this).next().html();
}).get();
alert($chk_values);
}案例2：-如果CheckBoxList项的值是数字顺序的(例如，1,2,3 ...n，多次采用这种方式)
<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 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:-如果CheckBoxList项值是其文本的短格式/首字母(例如用于芒果，我会说"M")
在这里，我使用了一个技巧在页面上获取复选框的值，这样在编写js脚本时就可以轻松地访问它。也就是说，我使用带有checkboxlist的隐藏字段，它将在html解析期间获取checkboxlist中的所有可用值，并将它们以其值存储在页面上。见下文：-
<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) ) %>' />我使用的是html隐藏字段，而不是runat=server隐藏字段，因为我们不需要使用这个隐藏字段在cs中编写任何代码。在这里，hiddenfield的角色只不过是助手，它将在编写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);
}同样，你也可以在无线电按钮/无线电按钮上做。
https://stackoverflow.com/questions/1286317
复制相似问题
腾讯云开发者
