选中/取消选中复选框以使用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>

A:

Aa

Ab
B:

Ba

Bb


C:

C

我试图通过单击复选框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";
        }

    }
}

函数showHide（）{
var checkbox_A_B=document.getElementById（“show_id”）；
var checkbox_C=document.getElementById（“hide_id”）；
var hiddenbrowserviles=document.getElementsByName（“隐藏”）；
var visibleBrowserFiles=document.getElementById（“可见”）；
对于（变量i=0；i

试试这个

id

是唯一的。请尝试使用

this

函数

因此，请检查id名称并应用该条件

其

仅使用
块显示id

它的

hide_id

应用了check和uncheck条件

函数showHide（该函数）{
var hiddenbrowserviles=document.getElementsByName（“隐藏”）；
对于（变量i=0；i

A:

Aa

Ab
B:

Ba

Bb




C:

C
档案：

试试这个

id

是唯一的。请尝试使用

this

函数

因此，请检查id名称并应用该条件

其

仅使用
块显示id

它的

hide_id

应用了check和uncheck条件

函数showHide（该函数）{
var hiddenbrowserviles=document.getElementsByName（“隐藏”）；
对于（变量i=0；i

A:

Aa

Ab
B:

Ba

Bb




C:

C
档案：

函数showHide（）{
var checkbox_A_B=document.getElementById（“show_id”）；
var checkbox_C=document.getElementById（“hide_id”）；
var fileInput=document.getElementById（“fileInput”）；
如果（选中复选框）
{
fileInput.style.display=“无”；
}
其他的
{
fileInput.style.display=“block”；
}
如果（选中复选框）
{
fileInput.style.display=“block”；
}
}

A:

Aa

Ab
B:

Ba

Bb


C:

C
档案：

函数showHide（）{
var checkbox_A_B=document.getElementById（“show_id”）；
var checkbox_C=document.getElementById（“hide_id”）；
var fileInput=document.getElementById（“fileInput”）；
如果（选中复选框）
{
fileInput.style.display=“无”；
}
其他的
{
fileInput.style.display=“block”；
}
如果（选中复选框）
{
fileInput.style.display=“block”；
}
}

A:

Aa

Ab
B:

Ba

Bb


C:

C
档案：

首先，您只是在操作“标签”，而不是文件。每个文件都有一个或多个复选框。如果只有一个复选框“C”，那么您的l