두 컨트롤을 동기화하는 방법은 무엇입니까?

Question

내 페이지 상단과 하단에 정확히 두 개의 라디오 버튼 목록이 있습니다. 상단 목록에서 라디오 버튼을 선택하면 하단 목록에서 동일한 변경 사항을 적용하고 싶습니다. 이 동기화를 달성 할 수있는 방법이 있습니까? 라디오 버튼 목록이 콘텐츠 페이지에 있습니다.

<asp:RadioButtonList ID="rblVerification1" runat="server" RepeatDirection="Horizontal"> 
       <asp:ListItem Value="V">Verified</asp:ListItem> 
       <asp:ListItem Selected="True" Value="NV">Not Verified</asp:ListItem> 
</asp:RadioButtonList> 

업데이트 : 나는 자바 스크립트 함수 다음 썼다, 그러나 그것은 작동하지 않습니다. 첫 번째 경고는 34를 반환합니다. 두 번째 경고는 정의되지 않은 값을 반환합니다. 아무도 내가 한 짓을 잘못 말할 수 있습니까? 내가 문제의 원인을 발견 :

function rblVerificationClicked(source, destination) { 
     alert(source.length); 
     var selectedValue; 
     for (var x = 0; x < source.length; x++) { 
      if (source[x].checked) { 
       selectedValue = source[x].value; 
       break; 
      } 
     } 
     alert(selectedValue); 
     for (var x = 0; x < destination.length; x++) { 
      destination[x].checked = false; 
     } 

     for (var x = 0; x < destination.length; x++) { 
      if (destination[x].value == selectedValue) { 
       destination[x].checked = true; 
       break; 
      } 
     } 
    } 

이를 Page_Load에서 나는

rblVerification.Attributes.Add("OnClick", string.Format("rblVerificationClicked('{0}', '{1}');", rblVerification.ClientID, rblVerification1.ClientID)); 
rblVerification1.Attributes.Add("OnClick", string.Format("rblVerificationClicked('{0}', '{1}');", rblVerification1.ClientID, rblVerification.ClientID)); 

해결

을 추가했다. asp : RadioButtonList를 input type = "radio"HTML 요소로 렌더링합니다. asp : RadioButtonList 클라이언트 ID를 얻으려면 라디오 버튼 배열을 반환하는 getElementsByTagName ("input")을 호출하십시오.

Answer 1

가장 쉬운 방법은 JavaScript를 사용하는 것입니다.

HTML :

<div id="list1"> 
    <input id="item1" type="radio" name="list1"/>Item 1 
    <input id="item2" type="radio" name="list1"/>Item 2 
    <input id="item3" type="radio" name="list1"/>Item 3 
<div> 
<br/> 
<div id="list2"> 
    <input id="item1" type="radio" name="list2"/>Item 1 
    <input id="item2" type="radio" name="list2"/>Item 2 
    <input id="item3" type="radio" name="list2"/>Item 3 
<div>​ 

자바 스크립트 :

$("input[name=list1]:radio").bind("change", function(e) { 

    var chk = $("div#list2") 
     .children("input[id=" + $(this).attr("id") + "]"); 

    chk.attr("checked", true); 

}); 

가 나는 또한 그래서 당신은 행동에 그것을 볼 수 있습니다 그것을 위해 JsFiddle을 만들어 나는 다음과 같은 몇 가지 예제 코드를 만들었습니다.