0

我的页面中有两个确切的单选按钮列表，顶部和底部。如果我在顶部列表中选择一个单选按钮，我希望底部列表进行相同的更改。有什么办法可以实现这种同步？我的单选按钮列表位于内容页面中。

<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 呈现为 input type=”radio” HTML 元素。因此，要获取 asp:RadioButtonList 客户端 ID，请调用 getElementsByTagName(“input”)，它将返回一个单选按钮数组。

4

1 回答 1

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，以便您可以看到它的运行情况。

于 2012-10-01T19:08:01.283 回答