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

如果选中“是”按钮，则将显示“显示”类别div。如果我将'SHOW'类div与输入字段一起使用，它将起作用。但是，当我将其放在输入字段div之外时，它将不起作用。

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

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

Answer 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>

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

1 个答案: