我在使用带有JavaScript的单选按钮隐藏/显示图像时遇到问题。我想做的是,在加载页面时,默认情况下仅显示第一张图像,而隐藏第二张图像。然后,用户可以选择在单击单选按钮时显示或隐藏哪一个。

这是我到目前为止所做的摘要。

<input type="radio" name="img1" onclick="img(0)" checked>Image 1
<input type="radio" name="img2" onclick="img(1)">Image 2

<div id="img1">
  <!-- insert image -->
</div>
<div id="img2">
  <!-- insert image -->
</div>


<script>
  function img(x){
    if(x==0){
      document.getElementById('img2').style.display='none';
      document.getElementById('img1').style.display='block';
    }
    else{
      document.getElementById('img1').style.display='none';
      document.getElementById('img2').style.display='block';
    }
    return;
  }
</script>


这里的问题是,在加载页面后,将显示两个图像。单击第一张图像的单选按钮后,第二张图像将被隐藏,反之亦然。另外,checked属性不起作用。

最佳答案

您可以将默认设置为不显示

<div id="img2" style="display:none;">
  <!-- insert image -->
</div>

关于javascript - Javascript:如何使用单选按钮在两个div之间显示/隐藏?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/58743991/

10-12 12:29
查看更多