Jquery를 사용하여 CheckBoxList의 선택된 항목의 값을 가져 오는 방법은 무엇입니까? '

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"를 반환하고 내가 할 수있는 반환 값은 0 ,1 등입니다.
이렇게 할 수있는 방법이 있습니까?

편집 : 렌더링 마크 업 : ASP.Net 2.0 (이 목적은 값의 서버 측을 얻을 수 있습니다 의도)을 적절이 렌더링하지 않기 때문에는

<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

당신은 해커 약간의 작업을 수행 할 수 있습니다 . 코드 숨김에서이 ​​같은 수행

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>이 감겨 있습니다. 당신은이처럼 <span>에 도착하고 .attr()을 통해 그 값을 검색 할 수 .closest() 또는 .parent()를 사용할 수 있습니다

$('#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에는이 문제가 없습니다.