Comment obtenir la ou les valeurs des éléments sélectionnés dans une liste de cases à cocher à l'aide de Jquery ?

Question

Si j'ai la CheckBoxList suivante

<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() renvoie toujours " on " et je ne peux pas renvoyer des valeurs telles que 0 ,1 etc.
Y a-t-il un moyen de le faire ?

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

Étant donné qu'ASP.Net 2.0 n'effectue pas ce rendu de manière appropriée (son but est d'obtenir les valeurs côté serveur), vous pouvez faire un peu de bricolage. Dans le code-behind, faites quelque chose comme ceci :

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

Votre balisage ressemblera alors à ceci (ignorez les noms plus courts, mon test n'était pas dans un autre conteneur nommé, et cela n'a aucune importance pour la question qui nous occupe) :

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

Remarquez que des <span data-value="valueHere"></span> enveloppé autour d'elle maintenant ? Vous pouvez juste utiliser .closest() o .parent() pour accéder à 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());
});

Essayez-le dans une démo ici :) Si cela peut vous aider. le mode de rendu par défaut pour ASP.Net 4.0 fait rendre le value dans le balisage, comme il se doit. La raison pour laquelle le data-thing sur l'attribut doit être aussi valide que possible, ces derniers sont appelés attributs de données ajoutés à la spécification de HTML5, mais ne posent aucun problème en 4.