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”。

我该如何解决这个问题？我在$(document).ready(function () {内插入了JS。

编辑我认为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>

Answer 2

可能是因为输入标记没有结束对。

尝试

'<input type="checkbox" checked="">'

它必须具有“名称”属性

Answer 3

经过测试的答案

<html>
<head>
    <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script>
$( document ).ready(function() {
$("#addButton").click(function () {
    var counter = 2; //for sample
    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++;
});
});
    </script>
</head>
<body>
    <input type="button" id="addButton" value="hello"/>
    <div id="AnswerGroup">  </div>
</body>
</html>

Answer 4

首先，代替$("#addButton").click(function () {养成$("#addButton").on('click', function () {的习惯，您将来可以更好地控制事件监听器。

接下来，var newTextBoxDiv = $(document.createElement('div')).attr("id", 'TextBoxDiv' + counter);应为var newTextBoxDiv = $('<div/>').prop('id', 'TextBoxDiv' + counter);。

接下来，您似乎正在创建内容newTextBoxDiv，然后在其后面插入内容。我不确定你想那样做。我想你会想要在你刚刚制作的盒子里添加内容。另外，根据.after()，它接受html作为参数。我相信你之后调用.html()只是设置newTextBoxDiv的内部HTML。

具体问题;您应该能够使用以下语法创建一个复选框： var checkbox = $('<input/>').attr('type', 'checkbox');

要将其设置为选中（或取消选中），请使用.prop()，如下所示： checkbox.prop('checked', true); //checks the box.

要将其设置为HTML字符串（和have it checked），我相信您应该使用以下语法： <input type="checkbox" checked>

Answer 5

尝试使用：

newTextBoxDiv.append(...)

而不是

newTextBoxDiv.after().html(...)

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

5 个答案: