jquery:获取ASP.NET复选框列表控件中复选框的值/text/innerhtml

您可以使用已经使用的选择器(但只使用clientid),然后获取下一个同级(标签)并获取其文本值。

例如

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

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

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

您必须迭代表单元素,搜索标签并获取其内部文本,ASP.NET将复选框包装在具有控件clientID的表中,您可以使用如下选择器:

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

ASP.NET为复选框列表呈现的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 .

让我们看看列表项的文本和值是否不同?-

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

案例1:如果复选框列表项文本和值相同

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

case-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 items值是其文本的一些缩写/首字母(例如,对于mango,我会说“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上执行此操作。

试用使用 Control.ClientID

来源[ MSDN]

例如

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

更多选项请参考资料来源。