.net repeater 라디오버튼 체크

.net하시면서 repeater 자주 사용하시나요?
많지는 않지만 종종 그리드 안에 라디오 버튼을 사용하는 경우가 있습니다.
라디오 버튼의 성격상 하나씩만 선택되게 하고 싶은 작업에서 사용하지요. 이럴때는 어떻게 할까요? 하여 오늘은 .net repeater 라디오버튼 체크에 대해서 알아보겠습니다.

먼저 html 부분에 아래와 같이 repeater를 추가 합니다.




<table id="Table" class="Tbl" style="width:780px; TABLE-LAYOUT: fixed; ">
<colgroup>
 <col width="60px" />
 <col width="210px" />
 <col width="110px" />
 <col width="130px" />
 <col width="40px" />
 <col width="70px" />
 <col width="*" />
</colgroup>
<asp:repeater id="RptList12345" Runat="server">
 <ItemTemplate>
  <tr style="cursor:hand;" no_onmouseover="this.style.backgroundColor='white'" no_onmouseout="this.style.backgroundColor='white'" bgcolor="White">
   <td class="ListCode" no_onclick=""><input type="radio" Runat="server" ID="radiobutton" name="radiobutton" VALUE="radiobutton"></td>
   <td class="ListCode" style="cursor:hand;" no_onclick="View('<%#DataBinder.Eval(Container.DataItem,"a")%>','<%#DataBinder.Eval(Container.DataItem,"b")%>','<%#DataBinder.Eval(Container.DataItem,"c","{0:d}")%>','<%# Container.ItemIndex %>', this);">
     <asp:Label ID="Lbl_a" Runat="server" text='<%#DataBinder.Eval(Container.DataItem,"a")%>' />
   </td>
   <td class="ListText" style="cursor:hand;" no_onclick="View('<%#DataBinder.Eval(Container.DataItem,"a")%>','<%#DataBinder.Eval(Container.DataItem,"b")%>','<%#DataBinder.Eval(Container.DataItem,"c","{0:d}")%>','<%# Container.ItemIndex %>', this);">
     <asp:Label ID="Lbl_b" Runat="server" text='<%#DataBinder.Eval(Container.DataItem,"b")%>' />
   </td>
   <td class="ListCode" style="cursor:hand;" no_onclick="View('<%#DataBinder.Eval(Container.DataItem,"a")%>','<%#DataBinder.Eval(Container.DataItem,"b")%>','<%#DataBinder.Eval(Container.DataItem,"c","{0:d}")%>','<%# Container.ItemIndex %>', this);">
     <asp:Label ID="Lbl_c" Runat="server" text='<%#DataBinder.Eval(Container.DataItem,"c")%>' />
   </td>
   <td class="ListCode" style="cursor:hand;" no_onclick="View('<%#DataBinder.Eval(Container.DataItem,"a")%>','<%#DataBinder.Eval(Container.DataItem,"b")%>','<%#DataBinder.Eval(Container.DataItem,"c","{0:d}")%>','<%# Container.ItemIndex %>', this);">
     <asp:Label ID="Lbl_d" Runat="server" text='<%#DataBinder.Eval(Container.DataItem,"d")%>' />
   </td>
   <td class="ListCode" style="cursor:hand;" no_onclick="View('<%#DataBinder.Eval(Container.DataItem,"a")%>','<%#DataBinder.Eval(Container.DataItem,"b")%>','<%#DataBinder.Eval(Container.DataItem,"c","{0:d}")%>','<%# Container.ItemIndex %>', this);">
     <asp:Label ID="Lbl_e" Runat="server" text='<%#DataBinder.Eval(Container.DataItem,"c","{0:d}")%>' />
   </td>
   <td class="ListCode" style="cursor:hand;" no_onclick="View('<%#DataBinder.Eval(Container.DataItem,"a")%>','<%#DataBinder.Eval(Container.DataItem,"b")%>','<%#DataBinder.Eval(Container.DataItem,"c","{0:d}")%>','<%# Container.ItemIndex %>', this);">
     <asp:Label ID="Lbl_f" Runat="server" text='<%#DataBinder.Eval(Container.DataItem,"f")%>' />
   </td>
   <input type="hidden" runat="server" id="hid_n" value=<%# DataBinder.Eval(Container.DataItem,"n")%> NAME="hid_n">
   <input type="hidden" runat="server" id="hid_t" value=<%# DataBinder.Eval(Container.DataItem,"t")%> NAME="hid_t">
  </tr>
 </ItemTemplate>
</asp:repeater>
</table>




다음으로 해당 .aspx.cs에서 라디오 버튼에 함수를 달아주시면 됩니다.
for(int i=0; i < RptList12345.Items.Count; i++)
                string JScript = "fnRadiobutton(this);";
    ((HtmlInputRadioButton)RptList12345.Items[i].FindControl("radiobutton")).Attributes.Add("no_onclick", JScript);
   }

조회 화면으로 넘어가는 "no_onclick" 함수를 같이 사용하면서 라디오 버튼의 "no_onclick" 함수만 체크하는 자바스크립트 "fnRadiobutton(this);" 함수로 바꿔주는 부분이라고 생각하시면 됩니다.

마지막으로 "fnRadiobutton(this);" 함수를 구현해야 겠지요...ㅎ
아래와 같이 구현하시면 됩니다.

function fnRadiobutton(rad) {
 // 전체 체크 취소
 $("#Table").find("input:radio").prop("checked", false);

 // 선택(체크)한 라디오버튼 체크
 $("#" + rad.id).prop("checked", true);
}




fnRadiobutton 함수를 호출 하면 먼저 체크되어있는 모든 라디오 버튼을 체크 해제시켜 줍니다. 그래야 그리드 안에서 하나의 라디오 버튼만 체크하게 하니까요ㅎㅎㅎ
그리고 방금 선택한 라디오 버튼을 jquery의 prop 속성을 사용하여 체크 합니다.

이상으로 .net repeater 라디오버튼 체크에 대해서 알아보았습니다.
끝까지 읽어주셔서 감사합니다.