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

Question

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

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

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

然后循环遍历获取值：

var whatIwant = selections[i].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 来找到对应于 selected的标签> 输入？

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 如下所示：

<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 生成的标记 here 的示例。

Answer 3

让我们看看 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 Items Values 是数字顺序（例如 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);
        }

案例 3：- 如果 CheckBoxList Items Values 是其文本的一些缩写/首字母（例如，对于 Mango，我会说“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时提供便利，并获取checkbox的值。

现在，让我们看看脚本的外观：-

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

类似地你可以在单选按钮列表/单选按钮上做。

Answer 4

尝试使用Control.ClientID

来源 [MSDN]

例如

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

更多选项请参考来源。