Я пытаюсь показать и скрыть элемент входного файла при установке/снятии флажка с помощью 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";
}
}
}
