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，一个werid号码，我期待2.第二个警报返回undefined。谁能告诉我做错了什么？

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呈现为输入类型=“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，以便您可以看到它的实际效果。

如何同步两个控件？

1 个答案: