onClickイベントが機能しない

Question

onclickイベントが機能していません。チェックボックスをクリックしている間は何も表示されません。ここで が私のコードです：

function showHide() 
 
{ 
 
    var checkbox1=document.getElementById("iconbox"); 
 
    var hiddeninputs=document.getElementsByClassName("hidden"); 
 
    for (var i=0;i!=hiddeninputs.length;i++){ 
 
     if(checkbox1.checked){ 
 
      hiddeninputs[i].style.display="block";   
 
     } 
 
    } 
 
}

.hidden { 
 
    display: none; 
 
}

<form action="#" name="form1"> 
 
     <input type="checkbox" name="iconbox" id="iconbox"onclick="showHide()"/> 
 
     <label for="iconbox">Manage your header</label> 
 
     <input type="text" name="icon1" id="icon1" class="hidden"> 
 
     <input type="text" name="icon2" id="icon2" class="hidden"> 
 
</form>

Answer 1

あなたは=「隠された」クラスを使用して要素を隠し、あなたが表示=「ブロック」でそれらを表示してみてください。 display = "none"で非表示にし、display = "block"で表示 またはclass = "hidden"で非表示にし、javascriptのremove関数で削除クラス "hidden"で表示する必要があります。

Answer 2

これはあなたが期待しているのでしょうか？

function showHide() { 
 
    var checked = document.getElementById("iconbox").checked; 
 
    var hiddeninputs = document.getElementsByClassName("hidden"); 
 
    for (var i = 0; i != hiddeninputs.length; i++) 
 
    hiddeninputs[i].style.display = (checked) ? "block" : "none"; 
 
}

.hidden { 
 
    display: none; 
 
}

<form action="#" name="form1"> 
 
    <input type="checkbox" name="iconbox" id="iconbox" onclick="showHide()" /> 
 
    <label for="iconbox">Manage your header</label> 
 
    <input type="text" name="icon1" id="icon1" class="hidden"> 
 
    <input type="text" name="icon2" id="icon2" class="hidden"> 
 
</form>