未捕获的类型错误：无法设置属性“已检查”为空答案

【问题标题】：Uncaught TypeError: Cannot set property 'checked' of null未捕获的类型错误：无法设置属性“已检查”为空
【发布时间】：2015-07-26 07:02:16
【问题描述】：

我在 javascript Hide/show div on checkbox: checked/unchecked 使用 Javascript。

var elem = document.getElementById('powermail_fieldwrap_331'),
    checkBox = document.getElementById('powermail_field_doruovaciaadresa2_1');
checkBox.checked = false;
checkBox.onchange = function doruc() {
    elem.style.display = this.checked ? 'block' : 'none';
};
checkBox.onchange();

我改变了“checkBox.checked = false;”到“checkBox.checked = true;” 它无论如何都可以工作，但会产生错误： 未捕获的类型错误：无法设置属性“已检查”为 null

Demo

在这种情况下，我该如何解决这个错误？

谢谢。

【问题讨论】：

这意味着 document.getElementById 没有找到具有该 ID 的元素。
我猜，您的 javascript 代码在页面上的 DOM 元素准备好之前执行。可能是，您需要在 DOM 准备好后执行尝试获取输入的代码。
它似乎在小提琴中工作正常。
@Peter，谢谢。但是，我在提琴手中没有看到任何错误..
jsfiddle 将所有代码包装在一个 onload 事件中。这就是它在那里运行良好的原因。

标签： javascript

【解决方案1】：

小提琴工作正常。唯一的问题可能是脚本在复选框成为 DOM 的一部分之前执行。

将您的代码包装在 onload 事件中。

window.onload = function() {
    var elem = document.getElementById('powermail_fieldwrap_331'),
    checkBox = document.getElementById('powermail_field_doruovaciaadresa2_1');
    checkBox.checked = false;
    checkBox.onchange = function doruc() {
        elem.style.display = this.checked ? 'block' : 'none';
    };
    checkBox.onchange();
};

或者确保在复选框是 DOM 的一部分之后编写脚本标记：

<label>
    <input type="checkbox" id="powermail_field_doruovaciaadresa2_1" checked="checked" />
    Show/hide
</label>
<div id="powermail_fieldwrap_331">Lorem ipsum</div>

<script>
var elem = document.getElementById('powermail_fieldwrap_331'),
    checkBox = document.getElementById('powermail_field_doruovaciaadresa2_1');
    checkBox.checked = true;
    checkBox.onchange = function() {
        elem.style.display = this.checked ? 'block' : 'none';
    };
    checkBox.onchange();
</script>

【讨论】：

【解决方案2】：

您的代码在文档完全准备好之前执行，这导致您收到的 ID 为 null，因为它尚未呈现。

这是一个常见的问题，这就是为什么在 jquery 中你总是使用$(document).ready();

为了确保文档首先完全加载，并且在文档完全加载之前不会执行任何元素，以防止出现此类错误。

在 java 脚本中有一个非常有用的帖子：

Pure java script jquery ready

【讨论】：

我可以移动“checkBox.checked = true;”吗到后面 "checkBox.onchange = function()": (jsfiddle.net/xSvLc/325 ) 现在它在我的环境中不会产生错误。我想知道它在jQuery语法中是否正确。

【解决方案3】：

您需要更改所有标签而不检查由

【讨论】：

【解决方案4】：

您的 document.getElementById("checkboxid") 包含空值。为此，将其存储在一个变量中，然后您可以像

一样检查

  var checkbox = document.getElementById("chkteam");
        if (checkbox == true) {

         // your condition 
        }

然后它会工作。

【讨论】：