Javascript：如何使用单选按钮在两个 div 之间显示/隐藏？答案

【问题标题】：Javascript: How to show/hide between two div using radiobutton?Javascript：如何使用单选按钮在两个 div 之间显示/隐藏？
【发布时间】：2019-11-07 17:12:22
【问题描述】：

我在使用带有 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 属性不起作用。

【问题讨论】：

标签： javascript html css radio-button

【解决方案1】：

您的方法的问题在于，通过添加更多图像，您对隐藏和显示的验证将变得越来越复杂，并且将来不会很好。你应该尝试一些更灵活的东西，我会给你一个包含 3 张图片的示例解决方案，这样更容易理解我的意思。

注意：输入中的“名称”标签将创建“无线电组”，因此它们都必须相同，否则您最终会同时拥有多个活动无线电。

选择哪个图像可见的输入，我决定传递图像的 id，因为这样可以更容易在下一步中搜索它

<span><input type="radio" name="image-selector" onclick="handler('img1')" checked>Image 1</span>
<span><input type="radio" name="image-selector" onclick="handler('img2')">Image 2</span>
<span><input type="radio" name="image-selector" onclick="handler('img3')">Image 3</span>

图像，在 2 和 3 上显示 none 将确保只有第一个在开始时可见，还有一个额外的类图像可以更容易隐藏所有图像并仅显示我们想要的图像我们最终得到了多张图片

<div id="img1" class="image">1</div>
<div id="img2" class="image" style="display:none">2 </div>
<div id="img3" class="image" style="display:none">3</div>

最后是显示和隐藏图像的处理函数，这里的优点是您可以在 html 中添加更多图像而无需更改此函数

function handler(x) {
      // get the list of all images and convert the html collection to an array
      var imagesArray = Array.from(document.getElementsByClassName('image'))

      // cycle the array to show the one selected and hide all the others
      imagesArray.forEach(ele => {
        if(ele.id === x) {
          ele.style.display = 'block'
        } else {
          ele.style.display = 'none'
        }
      })
  }

关于我用过的东西你自己没用过的一些信息

html 集合：https://www.w3schools.com/jsref/dom_obj_htmlcollection.asp

getElementsByClassName：https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName

数组 forEach : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

【讨论】：

成功了。谢谢！但我在 display: none 上有问题。当我单击第二个图像的按钮时，它不会正确渲染。你知道为什么吗？
@Semb 你确定你的代码没有错字吗？比如缺课，或者没有传递正确的 id 之类的？

【解决方案2】：

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

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

【讨论】：

谢谢！它工作，但图像没有正确呈现。

【解决方案3】：

试试这个：

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

    <div id="img1">
      jfdhgjfd
    </div>
    <div id="img2" style="display:none;">
     gfdgfd
    </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>

【讨论】：

嗨！我在@RafiHenig 的回答中遇到了同样的问题。第二张图不会显示。我想该名称就像将显示图像的标识符。

【解决方案4】：

无线电组必须具有相同的名称（name 属性的值）才能被视为一个组。

尝试运行下面的 sn-p：

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';
  }
}

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

    <div id="img1">
        1
    </div>
    <div id="img2" style="display: none;">
        2
    </div>

【讨论】：

我试过这样做，但第二张图片不会显示。我想该名称就像将显示图像的标识符。 checked 属性现在可以正常工作了。
确保您的第二个网址有效。

【解决方案5】：

不用 JS 也可以这样做

.img {
  display: none;
  position: absolute;
  top: 28px;
}

input:checked + .img {
  display: block;
}

<label for="radio1">Image 1</label>
<input id="radio1" type="radio" name="img" checked>
<div class="img">
  1
</div>
<label for="radio2">Image 2</label>
<input id="radio2" type="radio" name="img">
<div class="img">
  2
</div>

但.img 应该在无线电输入之后保留。

或者更通用的 JS 版本，无论图像数量如何都可以工作

document.querySelectorAll(".imageSelection").forEach(el => {
  el.onclick = event => {
    const id = event.target.dataset.imageToShow
    document.querySelectorAll(".img").forEach(img => { img.style.display = "none" })
    document.getElementById(id).style.display = "block"
  }
})

<label for="radio1">Image 1</label>
<input id="radio1" type="radio" name="img" class="imageSelection" checked data-image-to-show="img1">

<label for="radio2">Image 2</label>
<input id="radio2" type="radio" name="img" class="imageSelection" data-image-to-show="img2">


<div class="img" id="img1">
  1
</div>
<div class="img" id="img2" style="display: none">
  2
</div>

【讨论】：

【解决方案6】：

在这里，我想提供一个没有任何 JavaScript 的单选按钮示例。不使用 JavaScript 也可以实现相同的目标。然而，如果单选按钮的数量很少，它可能会很好，但对于更多的单选按钮没有用。此外，我们可以在这种情况下使用 SCSS。

我希望这会有所帮助。

@import 'https://fonts.googleapis.com/css?family=Open+Sans';

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body { 
  font-family: 'Open Sans', sans-serif;
}


.tab-content {
  display: none;
}

input.radio-tab[value="1"]:checked ~ #tabOne {
  display: block;
}

input.radio-tab[value="2"]:checked ~ #tabTwo {
  display: block;
}

input.radio-tab[value="3"]:checked ~ #tabThree {
  display: block;
}

<div class="radio-wrapper">
	<input type="radio" class="radio-tab" name="radioTabTest" value="1" id="tab1" checked />
	<label for="tab1">Tab 1</label>
	
	<input type="radio" class="radio-tab" name="radioTabTest" value="2" id="tab2" />
	<label for="tab2">Tab 2</label>
	
	<input type="radio" class="radio-tab" name="radioTabTest" value="3" id="tab3" />
	<label for="tab3">Tab 3</label>
	
	<div id="tabOne" class="tab-content">
		<img src="https://cdn.pixabay.com/photo/2016/01/08/11/57/butterfly-1127666_960_720.jpg" height="200"/>
	</div>
	
	<div id="tabTwo" class="tab-content">
		<img src="https://cdn.pixabay.com/photo/2018/02/08/22/27/flower-3140492_960_720.jpg" height="200"/>
	</div>
	
	<div id="tabThree" class="tab-content">
		<img src="https://cdn.pixabay.com/photo/2016/05/05/02/37/sunset-1373171_960_720.jpg" height="200"/>
	</div>
</div>

【讨论】：

【解决方案7】：

试试这个：

<script>function img(x){
if(x==0){
  document.querySelector("#img1").style.visibility = "visible";
  document.querySelector("#img1").style.display = "block";
  document.querySelector("#img2").style.visibility = "hidden";
  document.querySelector("#img2").style.display = "none";
}
else{
  document.querySelector("#img2").style.visibility = "visible";
  document.querySelector("#img2").style.display = "block";
  document.querySelector("#img1").style.visibility = "hidden";
  document.querySelector("#img1").style.display = "none";
}
return;}</script>

【讨论】：