用于更改图像的单选按钮 (Javascript/HTML)答案

【问题标题】：Radio buttons to change an image (Javascript/HTML)用于更改图像的单选按钮 (Javascript/HTML)
【发布时间】：2017-04-30 13:15:26
【问题描述】：

单击相应的单选按钮时，我有 3 个必须更改的图像。这些图像被称为 spaghetti.jpg、salade.jpg 和 cremeglacee.jpg。它们位于名为 images 的文件夹中。

到目前为止，这就是我所拥有的，但它不起作用。第一张图片（spaghetti.jpg）在我打开页面时加载，但当我点击单选按钮时，图片并没有改变。

<p>
<img src="images/spaghetti.jpg" alt="spaghetti" name="Spaghetti" />

Spaghetti <input type="radio" name="demo" value="spaghetti" checked
           onclick="image.src='images/spaghetti.jpg'"/> <br>
Salade <input type="radio" name="demo" value="salade"
           onclick="image.src='images/salade.jpg'"/> <br>
Cr&egrave;me glac&eacute;e <input type="radio" name="demo" value="cremeglacee"
           onclick="image.src='images/cremeglacee.jpg'"/> <br> <br>
</p>

【问题讨论】：

image (in image.src) 到底是什么？ - 给<img>一个id属性，sae someid，然后像document.getElementById('someid').src = 'whatever'一样使用它

标签： javascript html onclick radio-button radiobuttonlist

【解决方案1】：

$(document).ready(function(){
        $("input:radio[name=demo]").click(function() {
            var value = $(this).val();
            var image_name;
            if(value == 'spaghetti'){
                image_name = "images/spaghetti.jpg";
            }else{
                if(value == 'salade'){
                    image_name = "images/salade.jpg";
                }else{
                    image_name = "images/cremeglacee.jpg";
                }
            }
             $('#imgS').attr('src', image_name);
        });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="images/spaghetti.jpg" alt="spaghetti" name="Spaghetti" id="imgS"/>

Spaghetti <input type="radio" name="demo" value="spaghetti"/> <br>
Salade <input type="radio" name="demo" value="salade"/> <br>
Cr&egrave;me glac&eacute;e <input type="radio" name="demo" value="cremeglacee"/> <br> <br>

使用JQUERY，你可以很容易地做到这一点，检查上面的sn-p。当用户单击输入时，它会检查单选按钮的值，然后根据它将图像的 src 属性更改为相应的图像。

马特

【讨论】：