Как я могу получить значения выбранных элементов CheckBoxList, используя Jquery? - PullRequest
Новая
       18

Как я могу получить значения выбранных элементов CheckBoxList, используя Jquery?

1 голос
/ 10 июля 2010

Если у меня есть следующий 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>

1 Ответ

1 голос
/ 10 июля 2010

Поскольку 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());
});

Попробуйте в демоверсии здесь :) Если это вообще поможет. режим рендеринга по умолчанию для ASP.Net 4.0 делает визуализацию value в разметке, как и должно быть. Причина, по которой формат data-thing для атрибута должен быть максимально допустимым, они называются атрибутами данных , добавленными в спецификацию в HTML5, но не вызывают проблем в 4. 4. 1029 *

...