时间戳

首页 > 解决方案 > 用复选框控制 javascript

javascript - 用复选框控制 javascript

问题描述

我正在构建一个 chrome 扩展，我想用这个复选框控制 javascript：

    <div class="modal-icons">
        <div class="flex-container">
            <div class="flex">
                <label class="switch">
                  <input id="check" type="checkbox" checked>
                  <span class="slider round"></span>
                </label>
            </div>
        </div>
    </div>

如何获取 .js 文件中的状态？

我努力了 ：

document.addEventListener('DOMContentLoaded', function() {
const checked = document.getElementById('check').checked;
  # ACTION 
  });

和

var checked = document.getElementById('check').checked;
console.log('checked');

还有类似的方法，但我不确定如何获得状态。

我收到错误消息：Uncaught TypeError: Cannot read property 'checked' of null

例如，我可以写这个吗？

if (checked == true) {
   console.log('checked');
}

还是会给出“已检查”的值？

有人可以帮我解释一下吗？

标签： javascripthtmlcheckbox

解决方案

问题与

var checked = document.getElementById('check').checked;
console.log('checked');

是变量checked 保持一个值并且从不更新，即如果复选框默认选中，true即使更改也始终选中。此外，没有任何东西可以监听复选框的更新。

我会将事件侦听器绑定到元素

document.getElementById('check').addEventListener("change", event => {
    if(event.target.checked) {
        // Checkbox is checked
    } else {
        // Checkbox is not checked
    }
})

推荐阅读