在 Javascript 中使用带有点 / 句点的 HTML ID

Question

我有一个输入表单，例如

<input type="checkbox" id="a.b">

每当我使用console.log()javascript 函数单击它时，我都想打印它的值。

<input type="checkbox" id="a.b" onclick="console.log(a.b.value)">

显然，Javascript抱怨a是未定义的，并且值的属性b不存在。我发现这样做的唯一方法是使用 _ 而不是 .(句点(。我最终得到

<input type="checkbox" id="a_b" onclick="console.log(a_b.value)">

有没有更好的方法？我可以转义标识符中的点吗？我知道.是 Javascript 标识符中的无效字符，但它不在 HTML 中。我可以使用jquery解决这个问题吗？

Answer 1

Javascript使用.表示法来使用对象。并且您只能在用作字符串时进行转义。所以答案是否定的。

为什么不直接使用this

<input type="checkbox" id="a.b" onclick="console.log(this.value)">

如果您正在使用它，那很好，但正如有人已经在评论中指出的那样，不要使用内联事件。而是在元素上添加事件

var checkbox = document.getElementById("a.b");
checkbox.onchange = function() {
if(this.checked) {
console.log("checked");
} else {
console.log("un checked");
}
}

<input type="checkbox" id="a.b">

Answer 2

您可以通过执行console.log(window["a.b"].value)来访问它。我不建议这样做，因为像这样直接访问元素不是最佳实践，但它会按照您的要求进行操作。