如何同步两个控件？

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> 

更新： 我写了下面的JavaScript功能，但它不能正常工作。第一个警报返回34，一个数字，我期待2.第二个警报返回未定义。有人可以告诉我做了什么是错的吗？

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呈现为输入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>​ 

中的JavaScript：

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

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

    chk.attr("checked", true); 

}); 

我还创建了一个JsFiddle它，所以你可以看到它在行动。