Javascript 通过图像更改输入收音机列表

我目前正在尝试制作一个电台列表，其中3个选项如下：

色拉 意大利面 冰激凌

我是这样写的：

<div id="radiobuttons">
  <label><input name="vf" type="radio" value="0"checked/>Salade</label> 
  <br>
  <label><input name="vf" type="radio" value="1"/>Spaghetti</label>
  <br>
  <label><input name="vf" type="radio" value="2"/>Creme glacee</label>
  <br>
</div>

现在就在列表的旁边，我想要一张沙拉的图片，因为沙拉被选中了，但是当用户选择意大利面时，该图像会变成意大利面的图片。冰淇淋也一样

我尝试了很多功能，但都不起作用

有人能帮忙吗

<script>
$(document).ready(function() { 
  $("input:radio[name=vf]").change(function() { //name = button group 
    name
    if (this.value == "0") {
      $("#vf").attr( //image file name
        'src', '/images/salade.jpg' //image path
      );
    }
    else if (this.value == "1") {
      $("#vf").attr( //image file name
        'src', '/images/spaghetti.jpg' //image path
      );
    }
    else {
      $("#vf").attr( //image file name
        'src', '/images/cremeglacee.jpg'    //image path             
      );
    }
  });
</script>

---

您可以尝试类似的方法：

函数更改图像图{ document.querySelectorfood.src=imgUrl； } img{ 最大宽度：200px； 最大高度：200px； 显示：内联块； } 单选按钮{ 显示：内联块； } 沙拉 意大利面 奶油釉

---

分享你的JQuery脚本，你正在尝试的东西，显示你尝试的JS或JQuery代码，这是你想要的最接近的。告诉我这是怎么回事。我编辑了我的帖子，抱歉，我有点纠结于在这里发布代码，希望你们能理解我想做什么，这正是我需要的，我的朋友，非常感谢。这个论坛太棒了，顺便说一句，这是我的第一个问题。我很高兴这个解决方案适合你们，你能通过点击勾号将答案标记为选中的吗？我注意到你使用了imgur，如果我想在我的计算机上使用图片，而不是在imgur上托管，该怎么办？我对答案进行了投票，但它说它没有录制，因为它是新的