Question

我有一个HTML表单和一些打开文件上传选择器的复选框，第一个文件上传选择器总是在那里，无论如何，

然后我有一个复选框：id="chk"，点击后会使第二个文件上传选择器显示为(file-input2)，并且还会显示另一个复选框id="chk2"。

然后，当单击该复选框时，它应该使另一个设置可用，依此类推......

  <div class="form-group">
    <label for="exampleInputFile">Choose main image</label>
    <input type="file" id="exampleInputFile">

  </div>
<br/>
<div class="checkbox">
   <label>
     <input type="checkbox" id="chk"> Want to choose another picture?
   </label>
</div>

<div class="form-group" id="file-input" style="display:none;">
 <label for="exampleInputFile">Choose second image</label>
  <input type="file" id="exampleInputFile">
</div>

<div class="checkbox" id="chk2" style="display:none">
   <label>
     <input type="checkbox"> Want to choose another picture?
   </label>
</div>

<div class="form-group" id="file-input2" style="display:none;">
 <label for="exampleInputFile">Choose third image</label>
  <input type="file" id="exampleInputFile">
</div>

以下是执行此操作的JavaScript：

document.getElementById('chk').onchange = function(){
   if(this.checked) 
   {
   document.getElementById('file-input').style.display='block';
   document.getElementById('chk2').style.display='block';
   //more js statements
   }
   else 
   {
   document.getElementById('file-input').style.display='none';
   document.getElementById('chk2').style.display='none';
   //more js statements
   }



    var checkBox2 = document.getElementById('chk2');

   if(checkBox2.checked){
   document.getElementById('file-input2').style.display='block';
   }

   else{
    document.getElementById('file-input2').style.display='none';

   }

}

我遇到的问题是第二个复选框11 (id="chk2")，它不会因某种原因使第二种格式(id="file-input2")可见。

有人能告诉我我的JavaScript出错了吗

Answer 1

第二个复选框缺少id和onchange个事件。 Here's a fiddle

HTML

<div class="form-group">
    <label for="exampleInputFile">Choose main image</label>
    <input type="file" id="exampleInputFile" />
</div>
<br/>
<div class="checkbox">
    <label>
        <input type="checkbox" id="chk" />Want to choose another picture?</label>
</div>
<div class="form-group" id="file-input" style="display:none;">
    <label for="exampleInputFile">Choose second image</label>
    <input type="file" id="exampleInputFile" />
</div>
<div class="checkbox" id="box2" style="display:none">
    <label>
        <input type="checkbox" id="chk2" />Want to choose another picture?</label>
</div>
<div class="form-group" id="file-input2" style="display:none;">
    <label for="exampleInputFile">Choose third image</label>
    <input type="file" id="exampleInputFile" />
</div>

...和js

document.getElementById('chk').onchange = function () {
    if (this.checked) {
        document.getElementById('file-input').style.display = 'block';
        document.getElementById('box2').style.display = 'block';
        //more js statements
    } else {
        document.getElementById('file-input').style.display = 'none';
        document.getElementById('box2').style.display = 'none';
        //more js statements
    }
}

document.getElementById('chk2').onchange = function () {
    if (this.checked) {
        document.getElementById('file-input2').style.display = 'block';
    } else {
        document.getElementById('file-input2').style.display = 'none';
    }
}

Answer 2

您的id="chk2"应该在输入标记中，如<input type="checkbox" id="chk2" />

当您检查是否选中id="chk2"时，您正在检查错误的元素，它正在尝试检查<div class="checkbox" id="chk2">是否已经过检查...这根本没有意义这就是为什么你的第二个复选框在点击时没有做任何事情。

JavaScript不改变元素的风格

2 个答案: