动态添加到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小提琴演示.

您遇到的问题是原始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小提琴演示.

最后,你的一些HTML是无效的(或至少是错误的),一个<input />是void元素,它没有后代; 因此它要么没有结束标记(只是<input>:)或自我关闭(<input />).

此外,复选框旁边的文本有点误导,通常用HTML表单旁边的文本<input />会集中输入; 这是通过使用<label>元素将文本与控件相关联来实现的,例如:

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

JS小提琴演示.

要么:

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

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

参考文献:

• insertAdjacentHTML().