javascript - 勾选复选框时显示两个div

Question

当我勾选复选框时，我有两个具有相同类的 div，这两个 div 应该打开，但只有一个 div 打开。尝试使用以下脚本(片段)打开 div。哪里不对了？请帮助我。

function ShowHideDiv() {
  var chkYes = document.getElementById("chkYes");
  var pro = document.getElementsByClassName("pro")[0];
  pro.style.display = chkYes.checked ? "block" : "none";
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
  <input type="checkbox" id="chkYes" name="chkPassPort" onclick="ShowHideDiv()">Is Pro Contact</div>
<div class="pro" style="display: none">
  <div class="form-group">
    <input class="form-control" name="email" placeholder="Email">
  </div>
  <div class="form-group">
    <input type="file" name="userfile">
  </div>
  <div class="form-group">
    <textarea class="form-control" name="description" rows="3" placeholder="Description"></textarea>
  </div>
  <div class="form-group">
    <textarea class="form-control" rows="3" name="services" placeholder="Services"></textarea>
  </div>
</div>
<div class="pro" style="display:none;">
  <div class="form-group">
    <textarea class="form-control" rows="3" placeholder="सविस्तर माहिती"></textarea>
  </div>
  <div class="form-group">
    <textarea class="form-control" rows="3" placeholder="सुविधा"></textarea>
  </div>
</div>

Answer 1

从

中删除[0]

var pro = document.getElementsByClassName("pro")[0];

并添加 for 循环，因为 [0] 将仅影响 NodeList

中的第一个元素

function ShowHideDiv() {
  var chkYes = document.getElementById("chkYes");
  var pro = document.getElementsByClassName("pro");
  for (var i = pro.length - 1; i >= 0; i--) {
	pro[i].style.display = chkYes.checked ? "block" : "none";
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
  <input type="checkbox" id="chkYes" name="chkPassPort" onclick="ShowHideDiv()">Is Pro Contact</div>
<div class="pro" style="display: none">
  <div class="form-group">
    <input class="form-control" name="email" placeholder="Email">
  </div>
  <div class="form-group">
    <input type="file" name="userfile">
  </div>
  <div class="form-group">
    <textarea class="form-control" name="description" rows="3" placeholder="Description"></textarea>
  </div>
  <div class="form-group">
    <textarea class="form-control" rows="3" name="services" placeholder="Services"></textarea>
  </div>
</div>
<div class="pro" style="display:none;">
  <div class="form-group">
    <textarea class="form-control" rows="3" placeholder="सविस्तर माहिती"></textarea>
  </div>
  <div class="form-group">
    <textarea class="form-control" rows="3" placeholder="सुविधा"></textarea>
  </div>
</div>

享受