javascript - 以编程方式选中复选框以提交网络表单

Question

不幸的是，仍有一些表格没有实现批量/批量编辑。这可能会非常烦人，尤其是当您的表单中包含超过 100 条要更新的记录时。在我的例子中，大约有 1000 条记录，每条记录都有一个复选框，应该选中哪些内容，目前它们都未选中。

因此，我尝试运行一段动态的 javascript 来为我检查这些框。但是，在运行 javascript 后，它确实在所有复选框处显示了一个复选标记。提交表单后，第一个未选中的复选框 - 显示为选中的复选框 - 返回到原始状态(未选中)。

我从 FireFox 的控制台执行的即时 javascript。

var x = document.querySelectorAll('input[name^="example"][type="checkbox"]'), i = 0;
for (i = 0; i < x.length; i++) {
    x[i].checked = true;
    x[i].value = true; // I also tried 'on'
}

复选框(手动)选中和未选中的初始标记:

<input name="example[1]" checked="" type="checkbox">
<input name="example[2]" type="checkbox">

据我所知，checked 属性仅用于可视化表示，允许程序员在元素初始化时显示选中框。还需要注意的是，当您取消选中复选框时，元素不会更改。

我使用的方法是否正确？如果是这样，那我做错了什么？或者我必须使用不同的方法来实现我的目标，我应该怎么做？

Answer 1

尝试使用以下内容:-

x[i].setAttribute('checked', 'checked');

如果您在运行原始代码后检查输入，您会看到它只设置了 value 属性

<input name="example[2]" type="checkbox" value="true">

这与您手动单击复选框的 html 不同，后者已设置 checked 属性。