javascript - 动态添加到 div 时如何防止选中复选框？

Question

所以我一直在努力解决这个问题。

我想通过单击按钮动态地将复选框添加到 div 中。假设我在 div 中有 2 个复选框，然后取消选中这 2 个。当我单击按钮时，复选框变为 3 个(这就是我想要的)，但所有这 3 个都将被选中。我想要的是当我添加一个复选框时，其他复选框的选中状态保持与以前相同。

这是我的代码(http://jsfiddle.net/gr2o47wt/4/):

HTML:

<div id="chkbox_container">
    <input type="checkbox" checked>Check<br />
</div>
<input type="button" value="Add CheckBox" onClick="addCheckBox();">

JavaScript:

function addCheckBox() {
    txt = "<input type=\"checkbox\" checked>Check<br />";
    document.getElementById('chkbox_container').innerHTML += txt;
}

预先感谢您的回答! :)

Answer 1

您可以使用insertAdjacentHTML()而不是操纵 innerHTML :

<input type="button" value="Add CheckBox" 
onClick="document.getElementById('chkbox_container').insertAdjacentHTML('beforeend','<input type=\'checkbox\' checked=\'checked\' />Check<br />');">

JS Fiddle demo .

您遇到的问题是原始 HTML(由 innerHTML 返回)来自页面的源，而不是 DOM；因此，原来的复选框的选中/未选中性质被恢复。

insertAdjacentHTML()只需将 HTML 字符串添加到指定位置(本例中为 'beforeend')。

或多或少顺便说一句，如果可能的话，值得尝试将事件处理保持在 HTML 元素之外；并在 JavaScript 本身中绑定(bind)这些事件处理程序。这使得可维护性更加容易，并且会产生如下所示的代码:

// note that I gave the button an 'id' for simplicity:
var button = document.getElementById('addCheckboxes');

button.addEventListener('click', function () {
    document.getElementById('chkbox_container').insertAdjacentHTML('beforeend', '<input type=\'checkbox\' checked=\'checked\' />Check<br />');
});

JS Fiddle demo .

最后，您的某些 HTML 无效(或至少是错误的)，<input />是一个 void 元素，它不能有没有后代；因此它要么没有结束标签(只是: <input> )，要么自动关闭( <input /> )。

此外，复选框旁边的文本有点误导，通常使用 HTML 形式 <input /> 旁边的文本。将集中该输入；这是通过使用<label>来实现的将文本与控件关联的元素，例如:

<label><input type="checkbox" /> click</label>

JS Fiddle demo .

或者:

<input type="checkbox" id="inputElementID" />
<label for="inputElementID">click</label>

但是后一种形式确实需要动态生成 id s(这有点超出了这个问题的范围)。

引用文献:

• insertAdjacentHTML() .