选中/取消选中复选框以使用javascript显示/隐藏输入文件元素

Question

我正在尝试使用javascript在选中/取消选中复选框时显示和隐藏输入文件元素。我想检查复选框c以隐藏输入文件并取消选中它以显示输入文件。对于其他复选框，必须显示它。实现这个的最佳方法是什么？我在代码中做错了什么？我对其他建议持开放态度。提前谢谢。

我的HTML代码是：

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

并且我试图通过单击（隐藏）复选框c并再次取消它（显示）来显示和隐藏的是下面的内容，以便再次显示其他4复选框：

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

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

试试这个。

1. id是唯一的。请尝试使用this。
的功能
2. 所以要检查id名称并应用条件。
3. 其show id仅限于block
4. 其hide_id适用于检查和取消检查条件
＆＃13;
＆＃13;
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";
      }
}
  }
}
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

更简化的版本。单行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';

  }
}

使用 radio button

更新了答案
＆＃13;
＆＃13;
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";
      }
    }
  }
}
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

Answer 2

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;