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来找到对应于选中的标签投入？

Answer 1

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

e.g

$("#" + 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函数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当然，我们多次使用这种方式）

<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项值是其文本的一些缩写/首字母（例如芒果我会说“M”）

在这里，我使用了一个技巧来获取页面上复选框的值，以便在编写js脚本时可以轻松访问它。也就是说，我正在使用带有checkboxlist的hiddenfield，它将在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 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 + "']");

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

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

4 个答案: