0

私のページには、上と下の2つのラジオボタンリストがあります。上のリストでラジオボタンを選択した場合、下のリストでも同じ変更を加えたいと思います。この同期を実現する方法はありますか？私のラジオボタンリストはコンテンツページにあります。

<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を期待しています。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 に答える