如何使用Jquery获取CheckBoxList的选定项目的值（s）？

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”我能” t返回值，如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不使这个适当的（它的使用目的是获取值服务器端），你可以做一点两轮牛车的。在后台代码，做这样的事情：

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