check/uncheck checkbox to show/hide an input file element using javascript

Question

I am trying to show and hide an input file element on check/uncheck of a checkbox using javascript. I want to check checkbox c to hide the input file and uncheck it to show the input file. For the others checkboxes, it must be shown. What is the best way to implement this? what I'm doing wrong in my code? I am open to other suggestions. Thanks in advance.

My html code is:

 <div class="row">
        <div class="col-xs-4">
            <div class="checkbox">
                <label><b>  A:</br>

                       <label><input type="checkbox" name="a" value="a"  id="show_id" onclick="showHide()">  Aa</label></br>
                        <label><input type="checkbox" name="a" value="a" id="show_id" onclick="showHide()">  Ab</label>
                    </b></label>
            </div>
        </div>

        <div class="col-xs-4">
            <div class="checkbox">
                <label><b>  B: </br>

                       <label><input type="checkbox" name="b" value="b" id="show_id" onclick="showHide()">  Ba</label></br>
                        <label><input type="checkbox" name="b" value="b" id="show_id" onclick="showHide()">  Bb</label>
                    </b></label></br>
            </div>
        </div>

        <div class="col-xs-4">
            <div class="checkbox">
                <label><b>  C: </br>

                <label><input type="checkbox"  name="c" value="c" id="hide_id" onclick="showHide()">   C </label></b></label>
            </div>
        </div>

    </div>

and that what i'm trying to show and hide by clicking( to hide) on checkbox c and unclick it again(to show) is this below sothat it can be visible for the others 4 checkbox again:

 <div class="form-group col-xs-8">
<label id="visible" name="hidden"><b> files: </b></label></br>
<input class="form-control" type="file" name="hidden" id="visible"/> </br>
   </div>

i tried this in JS:

 function showHide() {


    var checkbox_A_B = document.getElementById("show_id");
    var checkbox_C = document.getElementById("hide_id");

    var hiddenBrowserFiles = document.getElementsByName("hidden");
    var visibleBrowserFiles = document.getElementById("visible");

    for(var i = 0; i < hiddenBrowserFiles.length; i++)
    {
        if(checkbox_C.checked)
        {
            hiddenBrowserFiles[i].style.display = "none";
        }
        else
        {
            visibleBrowserFiles[i].style.display = "block";
        }

        if(checkbox_A_B.checked)
        {
            visibleBrowserFiles[i].style.display = "block";
        }

    }
}

Answer 1

Try this .

1. id is unique .so try with function with this.
2. So to check with id name and apply the condition .
3. its show id only with block
4. its hide_id apply with check and an uncheck condition

function showHide(that) {
  var hiddenBrowserFiles = document.getElementsByName("hidden");

  for (var i = 0; i < hiddenBrowserFiles.length; i++) {
    if (that.id == 'show_id') {
      if (that.checked) {
        hiddenBrowserFiles[i].style.display = "show";
      } 
}
else{
      if (that.checked) {
        hiddenBrowserFiles[i].style.display = "none";
      } 
      else{
       hiddenBrowserFiles[i].style.display = "block";
      }
}
  }
}

<div class="row">
  <div class="col-xs-4">
    <div class="checkbox">
      <label><b>  A:</br>

                       <label><input type="checkbox" name="a" value="a"  id="show_id" onclick="showHide(this)">  Aa</label></br>
      <label><input type="checkbox" name="a" value="a" id="show_id" onclick="showHide(this)">  Ab</label>
      </b>
      </label>
    </div>
  </div>

  <div class="col-xs-4">
    <div class="checkbox">
      <label><b>  B: </br>

                       <label><input type="checkbox" name="b" value="b" id="show_id" onclick="showHide(this)">  Ba</label></br>
      <label><input type="checkbox" name="b" value="b" id="show_id" onclick="showHide(this)">  Bb</label>
      </br>
      </label>
      </br>
    </div>
  </div>

  <div class="col-xs-4">
    <div class="checkbox">
      <label><b>  C: </br>

                <label><input type="checkbox"  name="c" value="c" id="hide_id" onclick="showHide(this)">   C </label></b>
      </label>
    </div>
  </div>

</div>


<div class="form-group col-xs-8">
  <label id="visible" name="hidden"><b> files: </b></label></br>
  <input class="form-control" type="file" name="hidden" id="visible" /> </br>
</div>

For more simplified version .single line if condition

function showHide(that) {
  var hiddenBrowserFiles = document.getElementsByName("hidden");

  for (var i = 0; i < hiddenBrowserFiles.length; i++) {
    hiddenBrowserFiles[i].style.display = (that.id == 'show_id') ? (that.checked) ? "show" : '' : (that.checked) ? 'none' : 'block';

  }
}

updated answer with radio button

function showHide(that) {
  var hiddenBrowserFiles = document.getElementsByName("hidden");

  for (var i = 0; i < hiddenBrowserFiles.length; i++) {
    if (that.id == 'show_id') {
      if (that.checked) {
        hiddenBrowserFiles[i].style.display = "show";
      }
    } else {
      if (that.checked) {
        hiddenBrowserFiles[i].style.display = "none";
      } else {
        hiddenBrowserFiles[i].style.display = "block";
      }
    }
  }
}

<div class="row">
  <div class="col-xs-4">
    <div class="checkbox">
      <label><b>  A:</br>

                           <label><input type="radio" name="a" value="a"  id="show_id" onclick="showHide(this)">  Aa</label></br>
      <label><input type="radio" name="a" value="a" id="show_id" onclick="showHide(this)">  Ab</label>
      </b>
      </label>
    </div>
  </div>

  <div class="col-xs-4">
    <div class="checkbox">
      <label><b>  B: </br>

                           <label><input type="radio" name="b" value="b" id="show_id" onclick="showHide(this)">  Ba</label></br>
      <label><input type="radio" name="b" value="b" id="show_id" onclick="showHide(this)">  Bb</label>
      </br>
      </label>
      </br>
    </div>
  </div>

  <div class="col-xs-4">
    <div class="checkbox">
      <label><b>  C: </br>

                    <label><input type="checkbox"  name="c" value="c" id="hide_id" onclick="showHide(this)">   C </label></b>
      </label>
    </div>
  </div>

</div>


<div class="form-group col-xs-8">
  <label id="visible" name="hidden"><b> files: </b></label></br>
  <input class="form-control" type="file" name="hidden" id="visible" /> </br>
</div>

Answer 2

function showHide() {
    var checkbox_A_B = document.getElementById("show_id");
    var checkbox_C = document.getElementById("hide_id");
    var fileInput = document.getElementById("fileInput");
        if(checkbox_C.checked)
        {
           fileInput.style.display = "none";
        }
        else
        {
            fileInput.style.display = "block";
        }

        if(checkbox_A_B.checked)
        {
           fileInput.style.display = "block";
        }
}

<div class="row">
        <div class="col-xs-4">
            <div class="checkbox">
                <label><b>  A:</br>

                       <label><input type="checkbox" name="a" value="a"  id="show_id" onclick="showHide()">  Aa</label></br>
                        <label><input type="checkbox" name="a" value="a" id="show_id" onclick="showHide()">  Ab</label>
                    </b></label>
            </div>
        </div>

        <div class="col-xs-4">
            <div class="checkbox">
                <label><b>  B: </br>

                       <label><input type="checkbox" name="b" value="b" id="show_id" onclick="showHide()">  Ba</label></br>
                        <label><input type="checkbox" name="b" value="b" id="show_id" onclick="showHide()">  Bb</label>
                    </b></label></br>
            </div>
        </div>

        <div class="col-xs-4">
            <div class="checkbox">
                <label><b>  C: </br>

                <label><input type="checkbox"  name="c" value="c" id="hide_id" onclick="showHide()">   C </label></b></label>
            </div>
        </div>

    </div>
<div class="form-group col-xs-8">
  <div id="fileInput">
    <label id="visible" ><b> files: </b></label></br>
    <input class="form-control" type="file"/> </br>
  </div>
</div>