Question

我目前正在尝试制作一个广播列表，其中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>

Answer 1

你可以尝试这样的事情：

function changeImage(imgUrl){
  document.querySelector("#food").src=imgUrl;
}

img{
  max-width:200px;
  max-height:200px;
  display:inline-block;
}
#radiobuttons{
  display:inline-block;
}

<head>
</head>
<body>
  <div id="radiobuttons">
    <label><input name="vf" type="radio" onclick="changeImage('http://i.imgur.com/vEp0R6u.jpg')" value="0"/>Salade</label>
    <br>
    <label><input name="vf" type="radio" onclick="changeImage('http://i.imgur.com/POwjufy.jpg')" value="1"/>Spaghetti</label>
    <br>
    <label><input name="vf" type="radio" onclick="changeImage('http://i.imgur.com/38igW6A.jpg')" value="2"/>Creme glacee</label>
    <br>
  </div>
  <img id="food">
</body>

带图像变化的输入无线电列表

1 个答案: