适当的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";
        }
    }
}

然而，我需要一个适当的循环来拥有多个对象（复选框）和分离的显示/隐藏方法。这是第一个复选框代码：

<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'隐藏菜单选项。

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