JQuery：获取ASP.NET CheckBoxList控件中复选框的值/ text / innerHtml

我有一堆由asp.net CheckBoxList控件生成的复选框。 我想获取用户在页面上控件旁边看到的文本。

使用类似的控件，如RadioButtonList，我已经能够通过这样做在jQuery中获取它们的值：

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

然后循环并获取值：

 var whatIwant = selections[i].value; 

（在这种情况下，“值”将是我想要的文本）。

但是 – CheckBoxList渲染方式不同。 对于每个ListItem，不仅有输入，还有像这样的html标签：

  Other service providers 

正如您所看到的，输入标记本身，这是我的小jQuery查询找到的，不包括我想要的信息：“其他服务提供商”。 那是在标签上。

任何人都可以想到一个很好的解决方案 – 也许是让CheckBoxList在输入标签中呈现我需要的文本的好方法，或者是一些聪明的jQuery来找到与所选输入相对应的标签？

Answer 1

您可以使用已经使用的选择器（但只使用clientId），然后获取下一个兄弟（标签）并获取其文本值

例如

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

或者您可以通过使用其for属性来获取标签

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

Answer 2

您将不得不迭代表单元素，搜索标签并获取其内部文本，ASP .NET使用控件的ClientID将复选框包装在表中，您可以使用如下选择器：

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

ASP .NET为CheckBoxLists呈现的HTML如下所示：

  ..... 
 
 
 Item 1
 
 
 Item 2
  

您可以在此处查看ASP .NET生成的标记示例。

Answer 3

让我们看看如果ListItems的文本和值有所不同？ –

我已经解释了获取复选框或复选框列表的值/文本的所有可能情况，如下所示： –

情况1： – 如果CheckBoxList项目文本和值相同

  SQL ASP.Net jQuery MVC IIS  

调用以下js函数onclick或您需要的任何地方（如果需要调用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 Ofcourse，我们多次使用这种方式）

  SQL ASP.Net jQuery MVC IIS  

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); } 

情况3： – 如果CheckBoxList项值是其文本的一些缩写/首字母（例如对于芒果我会说“M”）

在这里，我使用了一个技巧来获取页面上复选框的值，以便在编写js脚本时可以轻松访问它。 也就是说，我正在使用带有checkboxlist的hiddenfield，它将在html解析期间获取checkboxlist中的所有可用值，并将它们存储在页面的值中。 见下文： –

  SQL ASP.Net jQuery MVC IIS   

我使用的是html hiddenfield而不是runat = server one，因为我们不需要使用这个hiddenfield在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); } 

同样，你可以在radibuttonlist / radiobutton上做。

Answer 4

尝试使用Control.ClientID

来源[MSDN]

例如

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

请参阅来源以获取更多选项。