时间戳

首页 > 解决方案 > JavaScript 检查复选框是否选中

javascript - JavaScript 检查复选框是否选中

问题描述

我想使用复选框更改背景颜色，但它只能工作一次。意思是如果我再次点击它没有任何改变。

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

标签： javascripthtml

解决方案

该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>

推荐阅读