2

我有一堆由 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 来找到与所选输入相对应的标签？

4

4 回答 4

10

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

例如

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

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

$("label[for=" + Control.ClientId + "]").text();
于 2009-08-17T05:51:26.667 回答
5

您将不得不遍历表单元素，搜索标签并获取其内部文本，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 生成的标记的示例。

于 2009-08-17T06:09:58.547 回答
1

让我们看看 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 函数 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 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时提供舒适感并获取复选框的值。

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

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

同样，您可以在单选按钮列表/单选按钮上执行此操作。

于 2014-07-15T15:39:18.170 回答
0

尝试使用 Control.ClientID

来源 [MSDN]

例如

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

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

于 2009-08-17T05:50:57.667 回答