Comment puis-je obtenir la (les) valeur (s) du (des) élément (s) sélectionné (s) de CheckBoxList en utilisant Jquery?

Question

Si je le CheckBoxList suivant

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

En utilisant Jquery je veux obtenir les valeurs des éléments sélectionnés, j'utilise le code suivant

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

$(this).val() retourne toujours « on » et je peux » t renvoyer des valeurs telles que 0 ,1, etc.
Existe-t-il un moyen de le faire?

EDIT: Rendus 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> 

Answer 1

Depuis ASP.Net 2.0 ne rend pas correctement (il est prévu but est d'obtenir le côté serveur valeurs) vous pouvez faire un peu de sueur . Dans le code-behind, faire quelque chose comme ceci:

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

Ensuite, votre balisage ressemblera à ceci (ignorer les noms plus courts, mon test n'a pas été dans un autre conteneur nommé, et il n'a pas d'importance pour un bit la question à la main):

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

Notez que <span data-value="valueHere"></span> supplémentaire enroulé autour de lui maintenant? Vous pouvez simplement utiliser .closest() ou .parent() pour se rendre à la <span> et récupérer cette valeur via .attr(), comme ceci:

$('#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 :) Si elle aide du tout. le mode de rendu par défaut pour ASP.Net 4.0 fait le value dans le balisage, comme il se doit. La raison pour le format data-thing sur l'attribut doit être aussi valide que possible, ils sont appelés data attributes, ajoutés à la spécification en HTML5, mais ne causent aucun problème pour cela dans 4.