如果选择了输入单选按钮，则显示 div答案

【问题标题】：Show div if input radio button is selected如果选择了输入单选按钮，则显示 div
【发布时间】：2020-11-08 16:16:43
【问题描述】：

如果选中单选按钮，我想显示多个 div。这是我尝试过的代码。

HTML：

<div class="form-group row">
                         <label for="inputEmail3" class="col-sm-2 col-form-label">Do you have Extras Cover</label>
                         <div class="col-sm-10">
                          <div class="form-check form-check-inline">
                            <input class="form-check-input yes" name="radio" type="radio"  id="yes" value="yes">
                            <label class="form-check-label" for="yes"> Yes </label>
                          </div>
                          <div class="form-check form-check-inline">
                            <input class="form-check-input" name="radio"  type="radio"  id="no" value="no">
                            <label class="form-check-label" for="no"> No </label>
                          </div>
                         </div>
                       </div>
                        <div class="form-group row show">
                         <label for="" class="col-sm-2 col-form-label">Medicare Number</label>
                         <div class="col-sm-10">
                           <input type="text" class="form-control" >
                         </div>
                       </div>
                       <div class="form-group row show">
                         <label for="" class="col-sm-2 col-form-label">Medicare Address</label>
                         <div class="col-sm-10">
                           <input type="text" class="form-control"  >
                         </div>
                       </div>

CSS：

.show{
   display:none ;
}
input#yes:checked ~ div.show{
   display: block;
}

如果选中“YES”按钮，则将显示“SHOW”类 div。如果我将“SHOW”类 div 与输入字段放在一起，它就可以工作。但是当我把它放在输入字段 div 之外时，它就不起作用了。

谁能帮我解决我的代码结构。

请查看图片以获得更好的理解。 my code

【问题讨论】：

据我了解，如果单击了某个复选框或单选按钮，您希望显示一些内容，这很简单：1. 在您的目标标签中添加一个类，通过点击事件上的句柄显示为“显示”单选按钮（如果选中添加“show”类，否则删除显示类）2.在css中定义“TargetTag”属性，但将高度设置为0；3.现在只需在css中编写“TargetTag.show”选择器并设置高度：${你的默认值}
我以前试过这种方式。但是失败了。事实上，当输入标签和目标 div 位于同一个 div 中时，它可以工作。如果您不介意，请尝试告诉我

标签： css input radio-button

【解决方案1】：

css 解决方案确实只有在那些“显示”div 与单选按钮位于同一父级内时才有效。如果您希望它们位于该输入字段 div 之外，请使用一些 javascript。

document.querySelector('input#yes').addEventListener('click', function() {
  Array.from(document.querySelectorAll('.form-group.show')).forEach((group) => {
    group.style.display = "block";
  })
})

document.querySelector('input#no').addEventListener('click', function() {
  Array.from(document.querySelectorAll('.form-group.show')).forEach((group) => {
    group.style.display = "none";
  })
})

.form-group.show {
  display: none;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="form-group row">
  <label for="inputEmail3" class="col-sm-2 col-form-label">Do you have Extras Cover</label>
  <div class="col-sm-10">
    <div class="form-check form-check-inline">
      <input class="form-check-input yes" name="radio" type="radio" id="yes" value="yes">
      <label class="form-check-label" for="yes"> Yes </label>
    </div>
    <div class="form-check form-check-inline">
      <input class="form-check-input" name="radio" type="radio" id="no" value="no">
      <label class="form-check-label" for="no"> No </label>
    </div>
  </div>
</div>
<div class="form-group row show">
  <label for="" class="col-sm-2 col-form-label">Medicare Number</label>
  <div class="col-sm-10">
    <input type="text" class="form-control">
  </div>
</div>
<div class="form-group row show">
  <label for="" class="col-sm-2 col-form-label">Medicare Address</label>
  <div class="col-sm-10">
    <input type="text" class="form-control">
  </div>
</div>

【讨论】：