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

Question

如果选中单选按钮，我想显示多个 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' class div 将显示。如果我将 'SHOW' class div 与输入字段放在一起，它就可以工作。但是当我把它放在输入字段之外时 div 它不起作用。

任何人都可以帮助我的代码结构。

请查看图片以便更好地理解。 my code

Answer 1

css 解决方案确实只有在那些 'show' 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>

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

Show div if input radio button is selected

css

input

radio-button