當勾選複選框時顯示兩個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

回答

相關問題