Question

如果我有以下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>

Answer 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()或.parent()即可转到<span>并通过.attr()检索该值，如下所示：

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

Give it a try in a demo here :)如果它有帮助的话。 ASP.Net 4.0 的默认呈现模式在标记中呈现value，应该如此。属性上data-thing格式的原因是尽可能有效，这些被称为data attributes，添加到HTML5中的规范中，但在4中没有引起任何问题。

如何使用Jquery获取CheckBoxList的所选项的值？

1 个答案: