how to call JS function when radiobutton list selected index changed dynamically

Question

i have few radio button lists and i need to change the selected index of few lists depending upon other radio button selection so for that i wrote something like below and i am calling some JS function on onclick event,codebehind method on OnSelectedIndexChanged event which are working fine..

function test(sender) {
            if (sender[0].checked)
            {
                var controlid = document.getElementById("RadioButtonList1");
                controlid[0].checked = true;
           }

<asp:RadioButtonList ID="RadioButtonList1" runat="server"
                RepeatDirection="Horizontal" 
                OnSelectedIndexChanged="RadioButtonList1_SelectedIndexChanged" onclick="validate()">
                <asp:ListItem >YES</asp:ListItem>
                <asp:ListItem >NO</asp:ListItem>
            </asp:RadioButtonList>
            <asp:RadioButtonList ID="RadioButtonList2" runat="server" RepeatDirection="Horizontal">
                <asp:ListItem onclick="test()">YES</asp:ListItem>
                <asp:ListItem onclick="test()">NO</asp:ListItem>

            </asp:RadioButtonList>

ISSUE: if i select YES in RadioButtonList2 then the RadioButtonList1 value also sets to YES but the functions(validate(),RadioButtonList1_SelectedIndexChanged) whichever am calling from RadioButtonList1 are not being called in this case..

could you tell me how can i resolve this issue..is there any functionality in jquery or JS to detect indexchange dynamically to call methods..

Answer 1

I would take a look at the jquery documentation, they usually have a good collection of code snippets as examples. Check out the functions for "on" and maybe a trigger function. You basucally just need change events. Hope this helps.

api.jquery.com

Answer 2

If I understand correctly, you want to change the selected value of a select box based on the selected radio button.

Why not bind the radio button with a jquery onchange event and in that function you can decide what to do with the select box selected value.

if you make the radio button value the same as the select box values for each corresponding radio buttons you can do something like the following:

    jQuery("#radio_btns").on("change", function(){
        jQuery("#select_element").val(jQuery(this).val())
    })

Where #radio_btns is the set of radio buttons and #select_element is the select box you wish to update.

Hope this helps!