正確的JavaScript以顯示/隱藏輸入

Question

我只想知道show / hide方法的正確函數循環代碼。 這是用於顯示/隱藏第一個（1）單選按鈕的javascript：

function showHide(){
    var chckbox = document.getElementById("chk");
    var hiddeninputs = document.getElementsByClassName("hidden");

    for(var i=0; i !=hiddeninputs.length; i++){
        if(chckbox.checked){
            hiddeninputs[i].style.display ="block";
        }
        else{
            hiddeninputs[i].style.display ="none";
        }
    }
}

但是，我需要使用單獨的show / hide方法使用多個對象（復選框）的適當循環。 這是第一個復選框代碼：

<input type="checkbox" name="area" id="chk" onclick="showHide(this.checked);"/>
    <label for="chk">Billing & Credit Management Systems</label>

<div class="hidden">
<input type="radio" name="area1" /> <label> Web Billin  g </label> <br />
<input type="radio" name="area1" /> <label> CRIBS </label>  <br />
<input type="radio" name="area1" /> <label> PPC </label>  <br />
<input type="radio" name="area1" /> <label> Others <input type="text" name="area1" placeholder="Please Specify"/></label><br /></label>  <br />
</div>

我需要循環代碼以提示顯示/隱藏以下對象：

<input type="checkbox" name="area" id="chk1" onclick="showHide(this.checked);"/>
    <label for="chk1">Customer Care Systems</label>

<div class="hidden">
<input type="radio" name="area1" /> <label> CRM (Customer Relationship) </label> <br />
<input type="radio" name="area1" /> <label> MVNO CRM </label>  <br />
<input type="radio" name="area1" /> <label> Self-Care Site </label>  <br />
<input type="radio" name="area1" /> <label> CMS (Trouble Ticketing) </label>  <br />
<input type="radio" name="area1" /> <label> IRS </label>  <br />
<input type="radio" name="area1" /> <label> Online Guide </label>  <br />
<input type="radio" name="area1" /> <label> TMOS </label>  <br />
<input type="radio" name="area1" /> <label> Others <input type="text" name="area2" placeholder="Please Specify"/></label><br /></label>  <br />
</div>

每當我選中時，僅第一個復選框提示，而第二個則不提示。

Answer 1

不是您要找的確切答案，而是更簡單（更少的循環）。 讓我知道這是否對您有用，我將盡力解釋這里發生的事情。

我實施此解決方案的目的是迫使您進行盡可能少的更改。

1）為復選框及其所屬的div分配唯一屬性。 在這種情況下，我使用了“數據菜單”。 在onclick函數中，將元素的“ this”實例傳遞到函數showHide中。

<input data-menu="1" type="checkbox" name="area" id="chk" onclick="showHide(this);"/>

<div class="hidden" data-menu="1">

2）使用CSS類“隱藏”來隱藏菜單選項。

.hidden {

  display: none;

}

3）重做您的JS函數，以在選中該框時動態添加隱藏的類。 由於默認情況下菜單是關閉的，因此選中自然會打開它們。

function showHide(e){

    var menu = document.querySelector('div[data-menu="'+e.getAttribute('data-menu')+'"');
    menu.classList.toggle('hidden');

}

請查看以下工作片段，以查看實際效果。

 function showHide(e){ var menu = document.querySelector('div[data-menu="'+e.getAttribute('data-menu')+'"'); menu.classList.toggle('hidden'); } 

 .hidden { display: none; } 

 <input data-menu="1" type="checkbox" name="area" id="chk" onclick="showHide(this);"/> <label for="chk">Billing &amp; Credit Management Systems</label> <div class="hidden" data-menu="1"> <input type="radio" name="area1" /> <label> Web Billin g </label> <br /> <input type="radio" name="area1" /> <label> CRIBS </label> <br /> <input type="radio" name="area1" /> <label> PPC </label> <br /> <input type="radio" name="area1" /> <label> Others <input type="text" name="area1" placeholder="Please Specify"/></label><br /></label> <br /> </div> <input data-menu="2" type="checkbox" name="area" id="chk1" onclick="showHide(this);"/> <label for="chk1">Customer Care Systems</label> <div data-menu="2" class="hidden"> <input type="radio" name="area1" /> <label> CRM (Customer Relationship) </label> <br /> <input type="radio" name="area1" /> <label> MVNO CRM </label> <br /> <input type="radio" name="area1" /> <label> Self-Care Site </label> <br /> <input type="radio" name="area1" /> <label> CMS (Trouble Ticketing) </label> <br /> <input type="radio" name="area1" /> <label> IRS </label> <br /> <input type="radio" name="area1" /> <label> Online Guide </label> <br /> <input type="radio" name="area1" /> <label> TMOS </label> <br /> <input type="radio" name="area1" /> <label> Others <input type="text" name="area2" placeholder="Please Specify"/></label><br /></label> <br /> </div> 

Answer 2

 function showHide(element){ var chckbox = document.getElementById(element); var hiddeninputs = document.getElementsByClassName(element); for(var i=0; i !=hiddeninputs.length; i++){ if(chckbox.checked){ hiddeninputs[i].style.display ="block"; } else{ hiddeninputs[i].style.display ="none"; } } } 

 <!DOCTYPE html> <html> <head> <title></title> </head> <body> <input type="checkbox" name="area" id="chk" onclick="showHide(this.id);"/> <label for="chk">Billing & Credit Management Systems</label> <div class="chk"> <input type="radio" name="area1" /> <label> Web Billin g </label> <br /> <input type="radio" name="area1" /> <label> CRIBS </label> <br /> <input type="radio" name="area1" /> <label> PPC </label> <br /> <input type="radio" name="area1" /> <label> Others <input type="text" name="area1" placeholder="Please Specify"/></label><br /></label> <br /> </div> <br> <input type="checkbox" name="area" id="chk1" onclick="showHide(this.id);"/> <label for="chk1">Customer Care Systems</label> <div class="chk1"> <input type="radio" name="area1" /> <label> CRM (Customer Relationship) </label> <br /> <input type="radio" name="area1" /> <label> MVNO CRM </label> <br /> <input type="radio" name="area1" /> <label> Self-Care Site </label> <br /> <input type="radio" name="area1" /> <label> CMS (Trouble Ticketing) </label> <br /> <input type="radio" name="area1" /> <label> IRS </label> <br /> <input type="radio" name="area1" /> <label> Online Guide </label> <br /> <input type="radio" name="area1" /> <label> TMOS </label> <br /> <input type="radio" name="area1" /> <label> Others <input type="text" name="area2" placeholder="Please Specify"/></label><br /></label> <br /> </div> </body> </html> try this this will work fine for you. 

Answer 3

您沒有使用函數調用中提供的參數。

var chckbox = document.getElementById("chk");

總是會找到第一個復選框，僅知道其他字段是否應該隱藏，並且

var hiddeninputs = document.getElementsByClassName("hidden");

將始終隱藏所有具有隱藏類的元素。 我覺得

<input type="checkbox" name="area" id="chk" onclick="showHide(this);"/>

（即，將參數更改為元素而不是.checked）與

function showHide(elem){
    var selector = "#" + elem.id + " ~ .hidden";
    document.querySelector(selector).style.display = elem.checked ? 'block' : 'none';
}

將做更多您想要的

Answer 4

在輸入類型復選框中調用onchange函數

例

<input type="checkbox" name="area" id="chk" onchange="valueChanged(this.id)"/>Billing & Credit Management Systems
<input type="checkbox" name="area" id="chk1" onchange="valueChanged(this.id)"/> Customer Care Systems

<script type="text/javascript">

 $(document).ready( function(){

     $(".hidden").hide();
     $(".hidden2").hide();

 });

 function valueChanged(id){

     if(id== "chk"){
         if($('#chk').is(":checked"))   
            $(".hidden").show();
         else
            $(".hidden").hide();
     }

     if(id== "chk1"){
        if($('#chk1').is(":checked"))   
            $(".hidden2").show();
        else
            $(".hidden2").hide();
     }

  }
</script>

<div class="hidden">
 <input type="radio" name="area1" /> <label> Web Billin  g </label> <br />
 <input type="radio" name="area1" /> <label> CRIBS </label>  <br />
 <input type="radio" name="area1" /> <label> PPC </label>  <br />
 <input type="radio" name="area1" /> <label> Others <input type="text" name="area1" placeholder="Please Specify"/></label><br /></label>  <br />
</div>

<div class="hidden2">
    <input type="radio" name="area1" /> <label> CRM (Customer Relationship) </label> <br />
    <input type="radio" name="area1" /> <label> MVNO CRM </label>  <br />
    <input type="radio" name="area1" /> <label> Self-Care Site </label>  <br />
    <input type="radio" name="area1" /> <label> CMS (Trouble Ticketing) </label>  <br />
    <input type="radio" name="area1" /> <label> IRS </label>  <br />
    <input type="radio" name="area1" /> <label> Online Guide </label>  <br />
    <input type="radio" name="area1" /> <label> TMOS </label>  <br />
    <input type="radio" name="area1" /> <label> Others <input type="text" name="area2" placeholder="Please Specify"/></label><br /></label>  <br />
</div>