how to synchronize two controls? - asp.net

Question

I have two exactly radio button lists in my page, top and bottom. If I select a radio button in the top list, I would like the bottom list make the same change. Is there any way I could achieve this synchronization?
My radio button lists are in a content page.
<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>
Update:
I wrote following javascript function, but it doesn't work. The first alert return 34, a werid number, I am expecting 2. The second alert return undefined. Can anybody tell what I did is wrong?
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;
}
}
}
In page_load, I added
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));
Resolved:
I found what caused the problem.
asp:RadioButtonList render as input type=”radio” HTML elements.
So to get asp:RadioButtonList client id, call getElementsByTagName(“input”) which will return an array of radio buttons.

Answer 1

The easiest way is to do this via JavaScript. I created some example code below:
The 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>​
The JavaScript:
$("input[name=list1]:radio").bind("change", function(e) {
var chk = $("div#list2")
.children("input[id=" + $(this).attr("id") + "]");
chk.attr("checked", true);
});
​I also created an JsFiddle for it so you can see it in action.