javascript - 如何使用javascript动态添加复选框？

Question

我使用 Bootstrap 并有一个带有 2 个文本字段和 2 个复选框的表单。使用添加按钮，我想添加(每次单击)带有复选框的附加文本字段。目前我正在使用这个JS:

$("#addButton").click(function () {

    var newTextBoxDiv = $(document.createElement('div'))
        .attr("id", 'TextBoxDiv' + counter);

    /*  TODO: patterns festlegen    */
    newTextBoxDiv.after().html('<div class="form-group label-floating">' +
        '<label class="control-label">Answer' + counter + '</label>' +
        '<input type="text" class="form-control"/>' +
        '</div><div class="togglebutton"><label><input type="checkbox" checked="">Toggle is on</input></label></div>');

    newTextBoxDiv.appendTo("#AnswerGroup");


    counter++;
});

它成功添加了文本字段，但复选框未显示，仅显示文本“Toggle is on”。

我该如何解决这个问题？我将JS插入$(document).ready(function () {里面.

编辑 我认为 CSS 导致了这个问题。当我简单地添加'</div><input type="checkbox" checked=""/></div>'时，它只显示复选框，没有 UI。添加其余部分后(例如 class="togglebutton"，我什么也没看到。

Answer 1

您的复选框标记不正确:

<label><input type="checkbox" checked="">Toggle is on</input></label>

应该是

<label><input type="checkbox" checked="" />Toggle is on</label>