單選按鈕更改圖像（Javascript / HTML）

Question

單擊相應的單選按鈕時，我必須更改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>

Answer 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，您可以很容易地做到這一點，請檢查上面的代碼片段。 當用戶單擊輸入時，它將檢查單選按鈕的值，然后基於該值將圖像的src屬性更改為相應的圖像。

馬特