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" /> 

試試這個，它將起作用。