JavaScript не меняет стиль элементов

У меня есть HTML-форма и некоторые флажки, которые открывают выборки для загрузки файлов. Первый выбор загрузки файлов всегда есть независимо от того,

Затем у меня есть флажок: id="chk" который при нажатии на него делает видимым второй выбор загрузки (file-input2) а также делает еще один флажок id="chk2".

Затем, когда этот флажок щелкнут, он должен сделать другой набор доступным и так далее...

Рабочая скрипка

<div>
 <label for="exampleInputFile">Choose main image</label>
 

 </div>

<div>
 <label>
  Want to choose another picture?
 </label>
</div>

<div id="file-input">
 <label for="exampleInputFile">Choose second image</label>
 
</div>

<div id="chk2">
 <label>
  Want to choose another picture?
 </label>
</div>

<div id="file-input2">
 <label for="exampleInputFile">Choose third image</label>
 
</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

2 ответа

Ваш id="chk2" должен быть во входном теге, например:

Когда вы проверяете, проверен ли id="chk2", вы проверяете неправильный элемент, он пытается проверить, установлен ли флажок

... который не делает смысл вообще, поэтому ваш второй флажок ничего не делает при нажатии.


Во втором onchange отсутствует id и событие onchange. Здесь скрипка

HTML

<div>
 <label for="exampleInputFile">Choose main image</label>
 
</div>

<div>
 <label>
 Want to choose another picture?</label>
</div>
<div id="file-input">
 <label for="exampleInputFile">Choose second image</label>
 
</div>
<div id="box2">
 <label>
 Want to choose another picture?</label>
</div>
<div id="file-input2">
 <label for="exampleInputFile">Choose third image</label>
 
</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';
 }
}

licensed under cc by-sa 3.0 with attribution.