Question

我在尝试隐藏选择输入字段时执行了此代码，直到选中复选框。它可以工作但是当页面首次加载时，这些都是可见的。我需要它们不可见，直到填写复选框。如果我加载页面然后单击复选框，然后取消选中对象消失的复选框，所以我知道它正在工作，但为什么它出现在开头，更重要的是我怎么阻止它这样做？

代码：

＆＃13;

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

＆＃13;

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

＆＃13;

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。所以看看。第二个原因是你没有调用你的函数，你只是定义了它。

＆＃13;

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

＆＃13;

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

＆＃13;

试试这个它会起作用。

Javascript onchange事件无法正常工作

3 个答案: