.net repeater 체크된 체크박스 Row 확인

.net의 repeater를 사용하면서 체크박스를 사용하는 경우는 많습니다.
그리드에서 해당 Row의 체크박스를 체크, 체크하여 삭제를 한다거나 값을 변경해준다거나 사용상의 편의로 이런 기능들을 많이 요구하니까요.
그럼 이럴때는 어떻게 해야 할까요? 이번에는 .net repeater 체크된 체크박스 Row 확인에 대해서 알아볼까 합니다.


먼저 repeater부분을 html에 아래와 같이 추가해줍니다.




<table id="checkTable" class="checkTableStype" style="width:200px; TABLE-LAYOUT: fixed;">
<colgroup>
 <col width="30px" />
 <col width="170px" />
</colgroup>
<asp:repeater id="checkRepeater" runat="server">
 <ItemTemplate>
  <tr>
   <td>
    <input type="checkbox" id="chkbox" no_onclick="fnChk(this);" NAME="chkbox">
    <asp:Label ID="LblNd_Cde" Runat="server" text='<%#DataBinder.Eval(Container.DataItem,"b")%>' style="display:none"></asp:Label>
   </td>
   <td id="tdScore" runat="server">
    <%#DataBinder.Eval(Container.DataItem,"a")%>
   </td>     
  </tr>
 </ItemTemplate>
</asp:repeater>
</table>




그리고 repeater 안에 있는 체크박스의 체크된 Row에 대한 정보를 확인하는 자바스크립트 함수를 아래와 같이 추가해주시면 됩니다.

var cnt = 0;
var tdScore = "";
var LblNd_Cde = "";

$("checkTable").find("tr").each(function () {
 $(this).find("td input").each(function () {
  var id = $(this).attr("id");
  if (id.indexOf("chkbox") > -1 && $(this).is(":checked")) {
   cnt++;

   $(this).closest("tr").each(function () {
    $(this).find("td").each(function () {
     var idTd = $(this).attr("id");

     if (idTd.indexOf("tdScore") > -1)
     tdScore = $(this).text();
     });

     $(this).find("td span").each(function () {
     LblNd_Cde = $(this).text();
     });
   });
  }
 });
});

테이블에서 전체 tr부분의 input 태그를 자긴 컨트롤을 추출하여 id가 체크박스 id와 맞는지 비교하고 체크가 되어있는 것을 추출하여 가장 가까운 tr의 요소를 구하는 방식 입니다.




이것을 가지고 해당 정보의 키 값을 hidden에 넣고 체크된 키값을 뽑아 일괄 삭제를 한다던지 일괄 update를 한다던지하는 기능을 만들 수도 있습니다.

이상으로 .net repeater 체크된 체크박스 Row 확인에 대해서 알아보았습니다.
지금까지 읽어주셔서 감사합니다.

댓글

이 블로그의 인기 게시물

껌 떼는 법 (완벽 제거)

학점 계산기 (백분위 환산) 완벽 정리

[엑셀] 셀에 수식 적용하는 모든 것 완벽 정리