当勾选复选框时显示两个div

我有两个具有相同类的div，当我勾选复选框时，应该打开这两个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>

来源

2016-09-26 Sagar Kodte

您使用**'document.getElementsByClassName（ “亲”）[0]'**因此只获得具有一流的第一要素。 –

是的，谢谢...得到它，因为我想.. –

从

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

[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--) { 
 
\t 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>

只影响第一元件

享受

来源

2016-09-26 11:37:38 Dave

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

来源

2016-09-26 11:58:07

当勾选复选框时显示两个div

回答

相关问题