当勾选复选框时显示两个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>
答
只影响第一元件
从
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>
享受
答
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";
}
}
您使用**'document.getElementsByClassName( “亲”)[0]'**因此只获得具有一流的第一要素。 –
是的,谢谢...得到它,因为我想.. –