Question

我想使用复选框更改背景颜色，但只能使用一次。意味着如果我再次单击它，什么都不会改变。

<body>
    <label class="switch">
        <input type="checkbox" onclick="check();">
        <span class="slider round"></span>
    </label>
</body>

<script>
    function check() {
        if (document.getElementsByTagName('input').checked) {
            document.body.style.backgroundColor = 'white';
        } else {
            document.body.style.backgroundColor = 'black';
        }
    }
</script>

Answer 1

Element.getElementsByTagName()方法返回具有给定标签名称的元素的实时HTMLCollection。

在这种情况下，您根本不需要使用getElementsByTagName()。只需将this传递给函数，以便您可以像下面这样在函数主体中引用该元素：

function check(chk) {
  if (chk.checked) {
      document.body.style.backgroundColor = 'white';
  } else {
      document.body.style.backgroundColor = 'black';
  }
}

<body>
    <label class="switch">
        <input type="checkbox" onclick="check(this);">
        <span class="slider round"></span>
    </label>
</body>

Answer 2

由于getElementsByTagName将响应元素列表。对于您的情况，您必须选择第一个元素以检查checked

function check() {
  if (document.getElementsByTagName('input')[0].checked) {
    document.body.style.backgroundColor = 'white';
  } else {
    document.body.style.backgroundColor = 'black';
  }
}
check();

<body>
    <label class="switch">
        <input type="checkbox" onclick="check();">
        <span class="slider round"></span>
    </label>
</body>

JavaScript检查复选框是否已选中

2 个答案: