Proper JavaScript to show/hide inputs

Question

I just want to know the proper function loop code for show/hide method. This is the javascript for show/hide for the first (1) radio button:

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

Yet I need the proper loop for having multiple objects (checkboxes) with seperated show/hide method. This is the first checkbox code:

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

And I need the loop code in order to prompt the show/hide to the following objects:

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

Only the first checkbox prompts while the second one doesn't whenever I checked.

Answer 1

Not the exact answer you're looking for, but a bit simpler (less looping). Let me know if this works for you, I'll try my best to explain what's happening here.

I implemented this solution with the intention of forcing you to change as little as possible.

1) Assign a unique attribute to the checkbox and the div it belongs to. In this case I used "data-menu". In the onclick function, pass "this" instance of the element into the function showHide.

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

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

2) Use the css class 'hidden' to hide your menu options.

.hidden {

  display: none;

}

3) Re-work your JS function to dynamically add the hidden class when the box is checked. Since your menus are off by default, checking on naturally turns them on.

function showHide(e){

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

}

Check out the below working snippet to see it in action.

 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

You're not using the parameter you're providing in the call of your function.

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

will always find the first checkbox only to know if the other fields should be hidden or not and

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

will allways hide all elements with class hidden. I think that

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

(ie change the parameter to the element rather than the .checked) in combination with

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

will do more of what you want

Answer 4

call onchange function in input type checkbox

example

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