JavaScript onchange事件不起作用

Question

我做了这段代码，试图隐藏选择输入字段，直到选中复选框。 它可以工作，但是在页面首次加载时都可见。 我需要它们在复选框被填充之前不可见。如果我加载页面，然后单击复选框，然后取消选中该复选框，则该对象消失了，所以我知道它正在工作，但是为什么它会出现在开头，更重要的是我如何停止是这样做的吗？

码：

 function doruc() { var elem = document.getElementById("secondhalf1"), checkBox = document.getElementById("pizza11"); elem.style.display = checkBox.checked ? 'block' : 'none'; }; 

 <input type="checkbox" id="pizza22" onclick="doruc()" name="halfHalf2" /> 

Answer 1

准备好文档状态后，需要在全局范围内调用doruc函数，然后调用该函数会将样式设置为none 。

<script>
    function doruc() {
        var elem = document.getElementById("secondhalf1"),
        checkBox = document.getElementById("pizza11");
        elem.style.display = checkBox.checked ? 'block' : 'none';
     };

   doruc();
</script>

Answer 2

我认为它可以解决您的问题。

  if(pizza22) {
    secondhalf1.style.display="none";
  }
  pizza22.onchange = function() {
        if(secondhalf1.style.display==="none") {secondhalf1.style.display="";}
      else if(secondhalf1.style.display==="") {secondhalf1.style.display="none";secondhalf1};
  }

JsFiddle： https ：//jsfiddle.net/x22ugdmm/1/

Answer 3

您在JavaScript中的ID名称与您的元素不匹配。 在JavaScript中有pizza11，在输入标签中有pizza22。 因此，调查一下。 第二个原因是您没有调用函数，而是定义了它。

 function doruc() { var elem = document.getElementById("secondhalf1"), checkBox = document.getElementById("pizza11"); elem.style.display = checkBox.checked ? 'block' : 'none'; }; doruc(); 

 <input type="checkbox" id="pizza11" onclick="doruc()" name="halfHalf2" /> 

试试这个，它将起作用。