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本身中绑定这些事件处理程序。这使得可维护性稍微容易一些，并且会产生如下代码：

// 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元素，它可以有 no 后代;因此它要么没有结束标记（只是：<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()。

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

1 个答案: