在单选按钮列表中选择选项时更改图像

要解决C#的问题，请在代码后台为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_SelectedIndexChangd"

<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>

感谢大家的建议非常感谢"KENT ANDERSON"——他提供了我可以扩展的框架，以获得我想要的功能。

也就是说，答案是在控件的CodeBehind中创建一个事件处理程序，如下所示：

protected void radCPUType_SelectedIndexChanged(object sender, EventArgs e)
{
   // This was Kent's suggestion, and also to setup the ImageUrl as needed.
   Image6.ImageUrl = "~/Images/MyDefault.jpg";
}

在选择控件上的选项之前，我将ImageUrl设置为初始保持默认图像。接下来，我需要一种方法来填充选中的图像。由于许多建议都有不同的、可能更复杂的实现方法，我发现我可以通过将控制作为参数和赋值传递，通过事件处理程序中的if-else结构来实现：

protected void radCPUType_SelectedIndexChanged(object sender, EventArgs e)
{
   // Setup the ImageUrl.
   Image6.ImageUrl = "~/Images/MyDefault.jpg";

   // Setup the if-else structure to assign images w/ the selections.
   if (radCPUType.SelectedValue == "A selected option value")
   {
      Image6.ImageUrl = "~/Images/Associated Image.jpg";
   }
   else if (radCPUType.Selectedvalue == "Another selected option value")
   {
      Image6.ImageUrl = "~/Images/Another Associated Image.jpg")
   }
   else
   {
      Image6.ImageUrl = "~/Images/The Default Image.jpg";
   }
}

由于RadioButtonList控件使用基于值的索引，因此需要SelectedValue类，以便控件可以保存单选列表的HTML中指定的选项选择。

if部分中的控件等于单选按钮列表上选择的选项；然后，下一个语句将与选项选择相关联的图像分配给ImageUrl，我当然使用else if来浏览剩余的无线电列表选项，以结构的结束else部分中的默认图像结束。这是一个成功！因此，我相信还有其他方法可以实现解决方案，这对我来说最有效

再次感谢您的所有投入，并再次向Kent Anderson致敬，他的建议为我们奠定了基础。

首先让我们将JS事件附加到代码绑定中

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>

我还没有对此进行测试，但如果有什么不起作用，请告诉我。

答案直接取自上一个问题：

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页面中谨慎使用。CCD_ 15是CCD_。如果你在浏览器中查看页面的源HTML代码，你会看到单选按钮列表的ASP.net客户端ID；jQuery选择器中的图像控件。

如果出现意外结果，您还应该使用FireBug for 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