检查是否已选中- <input type='checkbox'>

Question

我尝试按照中的描述进行操作- 检查复选框是否已选中javascript

这是我的代码-

var input = document.createElement("input");
input.name = "test";
input.type = "checkbox";
input.checked = true ;
var currentInput = document.getElementsByName("test");
if (currentInput.checked) {
    console.log("true");
}

但是运行后，尽管input.checked = true分配，但没有任何内容记录到控制台。

为什么它不记录为true ？

编辑：

根据@adeneo和@ mori57所说的，现在跟随-

var input = document.createElement("input");
input.name = "test";
input.type = "checkbox";
input.checked = true;
var body = document.getElementsByTagName('body')[0];
body.appendChild(input);
var currentInput = document.getElementsByName("test")[0];
if (currentInput.checked) {
    console.log("true");
}

记录为true

Answer 1

每当您看到getElements.. ，如复数形式，而不是getElement...这意味着您得到的是一个nodeList而不是单个元素，即使该nodeList中只有一个元素

您可以像数组一样访问nodeLists ，因此nodeList[0]是列表中的第一个元素

var currentInput = document.getElementsByName("test")[0];

当然，您已经有对该元素的引用，因此您无需再次获取它

var input = document.createElement("input");
input.name = "test";
input.type = "checkbox";
input.checked = true ;

if (input.checked) { // this will always be true, so it makes no sense
    console.log("true");
}

就像@ mori57的注释中指出的那样，您永远不会将元素添加到DOM中，因此当不存在document.getEleme....方法时就无法使用它。

我猜你真正想要的是一个事件处理程序

var input = document.createElement("input");
input.name = "test";
input.type = "checkbox";
input.checked = true ;

input.addEventListener('change', function() {
    console.log( this.checked );
}, false);

Answer 2

问题是document.getElementsByName("test")返回一个数组，因此您需要使用该数组的某个元素：

如果它是唯一的，则可以选择第一个：

document.getElementsByName("test")[0]

因此，您的新代码将是：

var input = document.createElement("input");
input.name = "test";
input.type = "checkbox";
input.checked = true ;
var currentInput = document.getElementsByName("test")[0];
if (currentInput.checked) {
    console.log("true");
}

正如mori57的评论所指出的那样 ，

您实际上从未创建过元素，从而导致无法发现它。 您将需要使用以下内容：

document.body.appendChild(input);

在声明currentInput以便能够找到它之前。