適當的JavaScript來顯示/隱藏輸入

我只是想知道顯示/隱藏方法的正確功能循環代碼。這是爲顯示/隱藏第一（1）的單選按鈕的JavaScript：適當的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"; 
     } 
    } 
}

然而，我需要用於具有多個對象（複選框）與分離式顯示/隱藏方法適當循環。這是第一個複選框代碼：

<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>

只有第一個複選框提示，而第二個沒有按每當我檢查的時候。

來源

2017-07-21 Kev

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

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'; 
}

會做更多你想要什麼

來源

2017-07-21 06:49:10 Friso

沒有確切的答案，你正在尋找，但有點簡單（少循環）。讓我知道這是否適合你，我會盡力解釋這裏發生的事情。

我實施此解決方案的目的是強制您儘可能少地進行更改。

1）爲複選框和它所屬的div分配一個唯一的屬性。在這種情況下，我使用「數據菜單」。在onclick函數中，將元素的「this」實例傳遞給showHide函數。 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>

來源

2017-07-21 06:52:44

它的工作先生！非常感謝你！ – Kev

也許接受這個答案？ – Friso

呼叫平變化在輸入類型複選框功能

例如

<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>

來源

2017-07-21 07:03:01 hashik

function showHide(element){ 
 
    \t \t var chckbox = document.getElementById(element); 
 
    \t \t var hiddeninputs = document.getElementsByClassName(element); 
 

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

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title></title> 
 
</head> 
 
<body> 
 
\t <input type="checkbox" name="area" id="chk" onclick="showHide(this.id);"/> 
 
\t  <label for="chk">Billing & Credit Management Systems</label> 
 
\t 
 
\t <div class="chk"> 
 
\t <input type="radio" name="area1" /> <label> Web Billin g </label> <br /> 
 
\t <input type="radio" name="area1" /> <label> CRIBS </label> <br /> 
 
\t <input type="radio" name="area1" /> <label> PPC </label> <br /> 
 
\t <input type="radio" name="area1" /> <label> Others <input type="text" name="area1" placeholder="Please \t Specify"/></label><br /></label> <br /> 
 
\t </div> \t <br> 
 

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

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

 
try this this will work fine for you.

來源

2017-07-21 07:09:13

適當的JavaScript來顯示/隱藏輸入

回答

相關問題