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

我正在尝试使用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";
        }

    }
}

最佳答案

尝试这个 。


id是唯一的。因此请尝试使用this函数。
因此，要检查ID名称并应用条件。
其show id仅与block
其hide_id带有选中和取消选中条件

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>

有关更简化的版本。单行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更新了答案

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>

关于javascript - 选中/取消选中复选框以使用javascript显示/隐藏输入文件元素，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43320037/