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

If I have the following CheckBoxList

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

Using Jquery i want to get the values of the selected items, I use the following code

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

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

$(this).val() always returns "on" and I can't return values such as 0 ,1, etc.
Is there any way to do that ?

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

EDIT : Rendered Markup:

编辑：渲染标记：

<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>

1 个解决方案

#1

Since ASP.Net 2.0 doesn't render this appropriately (it's intended purpose is to get the values server-side) you can do a bit of hackery. In the code-behind, do something like this:

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

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

Then your markup will look like this (ignore the shorter names, my test wasn't in another named container, and it doesn't matter one bit for the question at hand):

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

<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>

Notice that extra  wrapped around it now? You can just use .closest() or .parent() to get to the  and retrieve that value via .attr(), like this:

请注意，现在还有额外的吗？你可以使用.closest（）或.parent（）来获取并通过.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 :) If it helps at all. the default rendering mode for ASP.Net 4.0 does render the value in markup, as it should. The reason for the data-thing format on the attribute is to be as valid as possible, these are called data attributes, added to the spec in HTML5, but cause no issues for this in 4.

试试这里的演示:)如果它有帮助的话。 ASP.Net 4.0的默认呈现模式确实在标记中呈现值，应该如此。属性上的数据事物格式的原因是尽可能有效，这些被称为数据属性，添加到HTML5中的规范，但在4中没有引起任何问题。

#1