适当的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来显示/隐藏输入

回答

相关问题