onClick 事件不起作用答案

【问题标题】：onClick Event not workingonClick 事件不起作用
【发布时间】：2017-02-02 08:00:01
【问题描述】：

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>

【问题讨论】：

写：onClick="return showHide()"
成功了，你期待什么？如果你想隐藏/显示输入文本，你不必使用class="hidden" 来隐藏和style="display: block" 来显示，但你必须决定：使用添加/删除类或更改样式。
@SorangwalaAbbasali 这绝对不会改变任何事情。
还是不行
你所拥有的应该可以工作（并且可以工作：jsfiddle.net/1867ow5n）。如果它不适合您，请检查控制台是否有错误。另请注意，showHide() 函数不应放置在 jQuery document.ready 处理程序中，因为由于使用了 onclick 事件属性，它需要在全局范围内 - 这是一个问题本身。

标签： javascript jquery html css

【解决方案1】：

您使用 class="hidden" 隐藏您的元素，并尝试使用 display="block" 显示它们。您应该使用 display="none" 隐藏并使用 display="block" 显示或者使用 class="hidden" 隐藏并使用 javascript 的删除功能使用删除类 "hidden" 显示。

【讨论】：

【解决方案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>

【讨论】：