Question

我尝试按照 - check if checkbox is checked 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[0]中只有一个元素{ {3}}

您可以访问类似数组的nodeList，因此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");
}

当然，你已经有了对元素的引用，所以你不必再次获取它

document.getEleme....

并且正如@ mori57在评论中指出的那样，你永远不会将元素添加到DOM中，因此当它不存在时，你无法使用var input = document.createElement("input"); input.name = "test"; input.type = "checkbox"; input.checked = true ; input.addEventListener('change', function() { console.log( this.checked ); }, false);方法获取它。

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

{{1}}

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之前，才能找到它。

检查是否已选中 - <input type =“checkbox”/>

2 个答案: