如何使用Jquery獲取CheckBoxList的所選項的值?

[英]How can I get the value(s) of the selected item(s) of CheckBoxList using Jquery?


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


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 <span data-value="valueHere"></span> wrapped around it now? You can just use .closest() or .parent() to get to the <span> 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中沒有引起任何問題。


注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:https://www.itdaan.com/blog/2010/07/10/7251e9e7793b90951b02a112214d6e97.html



 
粤ICP备14056181号  © 2014-2021 ITdaan.com