JavaScript not changing style of elements

Question

I have a HTML form and some checkboxes which open up file upload choosers, The first file upload chooser is always there no matter what,

Then I have a checkbox: id="chk" which when clicked on makes the second file upload chooser visible (file-input2) and also makes another checkbox id="chk2" visible.

Then when that checkbox is clicked it should make another set available and so on...

Working fiddle

  <div class="form-group">
    <label for="exampleInputFile">Choose main image</label>
    <input type="file" id="exampleInputFile">

  </div>
<br/>
<div class="checkbox">
   <label>
     <input type="checkbox" id="chk"> Want to choose another picture?
   </label>
</div>

<div class="form-group" id="file-input" style="display:none;">
 <label for="exampleInputFile">Choose second image</label>
  <input type="file" id="exampleInputFile">
</div>

<div class="checkbox" id="chk2" style="display:none">
   <label>
     <input type="checkbox"> Want to choose another picture?
   </label>
</div>

<div class="form-group" id="file-input2" style="display:none;">
 <label for="exampleInputFile">Choose third image</label>
  <input type="file" id="exampleInputFile">
</div>

Here is the JavaScript that does it:

document.getElementById('chk').onchange = function(){
   if(this.checked) 
   {
   document.getElementById('file-input').style.display='block';
   document.getElementById('chk2').style.display='block';
   //more js statements
   }
   else 
   {
   document.getElementById('file-input').style.display='none';
   document.getElementById('chk2').style.display='none';
   //more js statements
   }



    var checkBox2 = document.getElementById('chk2');

   if(checkBox2.checked){
   document.getElementById('file-input2').style.display='block';
   }

   else{
    document.getElementById('file-input2').style.display='none';

   }

}

The problem I am having is which the second checkbox 11 (id="chk2") , it doesn't make the second form (id="file-input2") visible for some reason.

Can someone tell me where I have gone wrong with my JavaScript

Answer 1

The second check box is missing an id and an onchange event. Here's a fiddle

html

<div class="form-group">
    <label for="exampleInputFile">Choose main image</label>
    <input type="file" id="exampleInputFile" />
</div>
<br/>
<div class="checkbox">
    <label>
        <input type="checkbox" id="chk" />Want to choose another picture?</label>
</div>
<div class="form-group" id="file-input" style="display:none;">
    <label for="exampleInputFile">Choose second image</label>
    <input type="file" id="exampleInputFile" />
</div>
<div class="checkbox" id="box2" style="display:none">
    <label>
        <input type="checkbox" id="chk2" />Want to choose another picture?</label>
</div>
<div class="form-group" id="file-input2" style="display:none;">
    <label for="exampleInputFile">Choose third image</label>
    <input type="file" id="exampleInputFile" />
</div>

...and the js

document.getElementById('chk').onchange = function () {
    if (this.checked) {
        document.getElementById('file-input').style.display = 'block';
        document.getElementById('box2').style.display = 'block';
        //more js statements
    } else {
        document.getElementById('file-input').style.display = 'none';
        document.getElementById('box2').style.display = 'none';
        //more js statements
    }
}

document.getElementById('chk2').onchange = function () {
    if (this.checked) {
        document.getElementById('file-input2').style.display = 'block';
    } else {
        document.getElementById('file-input2').style.display = 'none';
    }
}

Answer 2

Your id="chk2" should be in the input tag like so <input type="checkbox" id="chk2" />

When you are checking if id="chk2" is checked, you are checking the wrong element, it is trying to check if the <div class="checkbox" id="chk2"> is checked... which doesn't make sense at all, that is why your 2nd checkbox is not doing anything when clicked on.