Изменение изображения при выборе параметра в списке переключателей

Чтобы решить вашу проблему с помощью С#, создайте обработчик событий для SelectedIndexChanged в своем коде.

 protected void radCPUType_SelectedIndexChanged(object sender, EventArgs e)
    {
        // Set the ImageUrl however you like
        Image6.ImageUrl = "~/Images/Icon_CPU.jpg";
    }

Затем уточните свой список переключателей, чтобы установить AutoPostBack = "True" и OnSelectedIndexChanged = "radCPUType_SelectedIndexChanged"

<asp:RadioButtonList ID="radCPUType" RepeatDirection="Horizontal" runat="server" AutoPostBack="True" OnSelectedIndexChanged="radCPUType_SelectedIndexChanged">
                        <asp:ListItem Value="AMD">AMD</asp:ListItem>
                        <asp:ListItem Value="Intel">Intel</asp:ListItem>
                        <asp:ListItem Value="AMD Dual (Server)">AMD Dual (Server)</asp:ListItem>
                        <asp:ListItem Value="Intel Dual (Server)">Intel Dual (Server)</asp:ListItem>
                    </asp:RadioButtonList>

Ответ был поднят прямо из предыдущего вопроса:

ASPX

<td>
<asp:RadioButtonList ID="radCPUType" RepeatDirection="Horizontal" runat="server">
  <asp:ListItem Value="AMD">AMD</asp:ListItem>
  <asp:ListItem Value="Intel">Intel</asp:ListItem>
  <asp:ListItem Value="AMD Dual (Server)">AMD Dual (Server)</asp:ListItem>
  <asp:ListItem Value="Intel Dual (Server)">Intel Dual (Server)</asp:ListItem>
</asp:RadioButtonList>
</td>

<td>
<asp:Image ID="Image6" runat="server" ImageUrl="~/Images/Icon_CPU.jpg" />
</td>

Javascript

$(document).ready(function () {
    $("#<%= yourID.ClientID %> input").click(function () {
        var value = $(this).val();
        var image_name;
        var image_path = "/Images/"; 
        //If the images directory isn't at the website root you could use asp.nets
        //resolveURL method instead

        switch (value)
        {
            case "AMD":
            image_name = '"AMD_CPU_1.jpg";
            break;

            case "Intel";
            image_name = "Intel_CPU_2.jpg"
            break;

            case "AMD Dual (Server)";
            image name = "" // Insert your image here
            break;

            case "Intel Dual (Server)";
            image name = "" // Insert your image here
            break;
       }

        /*************************************
        *Old  Ineeficient code
        if (value == 'AMD') {
            image_name = "AMD_CPU_1.jpg";
        } else {
            if (value == 'Intel') {
                image_name = "Intel_CPU_2.jpg";
            } else {
                image_name = "Icon_CPU.jpg";
            }
        }
        *************************************************/

        //console.log(image_name);
         $("#<%= Image6.ClientID %>").attr('src', image_path + image_name);
    });
});

<% %> - блок кода сервера и должен использоваться экономно на страницах aspx. <%= %> - короткая рука для <% Response.Write() %>. Если вы просмотрите исходный HTML-код страницы в браузере, вы увидите идентификатор клиента ASP.net элементов управления списком радио и кнопок в селекторах jQuery.

Вы также должны использовать инструмент, например FireBug для инструментов разработчика Firefox или Chrome, для проверки путей для изображения, как только вы нажимаете эти флажки, если вы получаете неожиданные результаты. Также обратите внимание на строку //console.log(image_name); , Удаление комментариев из этой строки приведет к сбросу значения image_name на консоль, что полезно для отладки. Подробнее см. Здесь: http://blogs.msdn.com/b/cdndevs/archive/2011/05/26/console-log-say-goodbye-to-javascript-alerts-for-debugging.aspx

Примечание

Я не вижу необходимости в управлении изображениями здесь. Простой старый тег изображения html будет работать. Если вы используете тег изображения, вы не получите имя имени asp.net, которое вы сделали в исходном вопросе, и можете ссылаться на него просто с помощью $("#Image6")

Дополнительная информация о инструкции switch если вы не знакомы с ней: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/switch

Сначала давайте присоединим событие JS в codebehind

radCPUType.Attributes.Add("onclick", "changeImage();");

Затем нам нужно создать JS-функцию.

 <script type="text/javascript">
    function changeImage() {

        var img = $('#<%=radCPUType.ClientID %>');

        switch ($('#<%=radCPUType.ClientID %> input[type=radio]:checked').val())
        {
            case 'AMD':
                img.src = 'newimage.png';
                break;
        }
    }
</script>

Я не тестировал это, но дайте мне знать, если что-то не работает.