1

如果我有以下 CheckBoxList

<asp:CheckBoxList ID="typeCheckBoxList" runat="server" RepeatDirection="Horizontal">
  <asp:ListItem Value="0">Student</asp:ListItem>
  <asp:ListItem Value="1">Parent</asp:ListItem>
  <asp:ListItem Value="2">Educational</asp:ListItem>
  <asp:ListItem Value="3">Specialist </asp:ListItem>
  <asp:ListItem Value="5">Other</asp:ListItem>
</asp:CheckBoxList>

使用 Jquery 我想获取所选项目的值，我使用以下代码

$('#<%= typeCheckBoxList.ClientID %> input:checked').each(function() {
   alert($(this).val());
   alert($(this).next('label').text());
});

$(this).val()总是返回“ on”，我不能返回诸如0 ,1等的值。
有没有办法做到这一点？

编辑：渲染标记：

<table id="RegisterationWUC1_typeCheckBoxList" class="listVertical" border="0"> 
  <tr> 
    <td>
      <input id="RegisterationWUC1_typeCheckBoxList_0" type="checkbox" name="RegisterationWUC1$typeCheckBoxList$0" />
      <label for="RegisterationWUC1_typeCheckBoxList_0">Student</label>
    </td>
    <td>
      <input id="RegisterationWUC1_typeCheckBoxList_1" type="checkbox" name="RegisterationWUC1$typeCheckBoxList$1" />
      <label for="RegisterationWUC1_typeCheckBoxList_1">Parent</label>
    </td>
    <td>
      <input id="RegisterationWUC1_typeCheckBoxList_2" type="checkbox" name="RegisterationWUC1$typeCheckBoxList$2" />
      <label for="RegisterationWUC1_typeCheckBoxList_2">Educational</label>
    </td>
    <td>
      <input id="RegisterationWUC1_typeCheckBoxList_3" type="checkbox" name="RegisterationWUC1$typeCheckBoxList$3" />
      <label for="RegisterationWUC1_typeCheckBoxList_3">Specialist </label>
    </td>
    <td>
      <input id="RegisterationWUC1_typeCheckBoxList_4" type="checkbox" name="RegisterationWUC1$typeCheckBoxList$4" />
      <label for="RegisterationWUC1_typeCheckBoxList_4">other</label>
    </td>
  </tr> 
</table>
4

1 回答 1

1

由于 ASP.Net 2.0 没有适当地呈现这个（它的预期目的是获取服务器端的值）你可以做一些hackery。在代码隐藏中，执行以下操作：

foreach (ListItem li in typeCheckBoxList.Items)
  li.Attributes.Add("data-value", li.Value);

然后您的标记将如下所示（忽略较短的名称，我的测试不在另一个命名容器中，对于手头的问题一点也不重要）：

<table id="typeCheckBoxList"> 
  <tr> 
    <td>
      <span data-value="0">
        <input id="typeCheckBoxList_0" type="checkbox" name="H$M$typeCheckBoxList$0" />
        <label for="typeCheckBoxList_0">Student</label>
      </span>
    </td>
    <td>
      <span data-value="1">
        <input id="typeCheckBoxList_1" type="checkbox" name="H$M$typeCheckBoxList$1" />
        <label for="typeCheckBoxList_1">Parent</label>
      </span>
    </td>
    <td>
      <span data-value="2">
        <input id="typeCheckBoxList_2" type="checkbox" name="H$M$typeCheckBoxList$2" />
        <label for="typeCheckBoxList_2">Educational</label>
      </span>
    </td>
    <td>
      <span data-value="3">
        <input id="typeCheckBoxList_3" type="checkbox" name="H$M$typeCheckBoxList$3" />
        <label for="typeCheckBoxList_3">Specialist </label>
      </span>
    </td>
    <td>
      <span data-value="5">
        <input id="typeCheckBoxList_4" type="checkbox" name="H$M$typeCheckBoxList$4" />
        <label for="typeCheckBoxList_4">Other</label>
      </span>
    </td> 
  </tr> 
</table>

注意到现在有多余的<span data-value="valueHere"></span>包裹了吗？您可以使用.closest()or.parent()来获取<span>并通过 检索该值.attr()，如下所示：

$('#typeCheckBoxList input:checked').each(function() {
  alert($(this).closest('span').attr('data-value'));
  alert($(this).next('label').text());
});

在此处的演示中试一试:) 如果它有帮助的话。ASP.Net 4.0 的默认呈现模式确实呈现valuein 标记，因为它应该。属性格式的原因data-thing是尽可能有效，这些被称为数据属性，添加到 HTML5 的规范中，但在 4 中不会导致此问题。

于 2010-07-10T12:32:23.023 回答