Demo Fiddle

Question

当我想创建动态CheckBox时，我在将它们插入正确位置时遇到问题。我想将它们放在输入字段下方，而不是在图像下方。我没有＆＃39;真的现在如何以我描述的方式放置它们。

HTML：

 <div id="modalDialog">
    <form>
        <p>Description:</p>
        <input type="text" id="customTextBox" style="width: 100%; font-size: 120%;" />
        <hr class="fancy-line" />
        <p>Card due Date:</p>
        <input type="text" id="datepicker" style="width: 15%" />
        <input type="button" id="Getbtn" value="Get value" />
        <hr class="fancy-line" />
        <p>Things To Do:</p>
        <div id="progressbar">
            <div id="progress">
                <div id="pbaranim"></div>
            </div>
        </div>
        <p>Create CheckBox:</p>
        <input type="text" id="checkBoxName" />
        <input type="button" id="btnSaveCheckBox" value="_Ok" />
        <hr class="fancy-line" />
        <p>
            <img src="/Pages/Images/comment.png" width="40" height="40" style="display: inline-block" />Comments:</p>
    </form>
</div>

JQuery的：

$(document).ready(function () {
    $('#btnSaveCheckBox').click(function () {
        addCheckbox($('#checkBoxName').val());
        $('#checkBoxName').val("");
    });

    $(function () {
        $("#progressbar").progressbar({
            value: 0,
            max: 100
        });

    });
});

function addCheckbox(name) {
    var container = $('#modalDialog');
    var inputs = container.find('input');
    var id = inputs.length + 1;

    $('<input />', {
        type: 'checkbox',
        id: 'cb' + id,
        value: name
    }).appendTo(container);
    $('<label />', {
        'for': 'cb' + id,
        text: name
    }).appendTo(container);
    $('<br/>').appendTo(container);
}

Answer 1

这是因为您的代码将复选框附加到modalDialog元素，该元素是您看到的所有项目的容器，因此它们会在其他所有项目之后添加。

只需添加一个新元素（例如名为checkboxes），将其放在您希望复选框显示的位置，然后将复选框附加到此处，即la：

Demo Fiddle

HTML

<div id="modalDialog">
    <form>
        <p>Description:</p>
        <input type="text" id="customTextBox" style="width: 100%; font-size: 120%;" />
        <hr class="fancy-line" />
        <p>Card due Date:</p>
        <input type="text" id="datepicker" style="width: 15%" />
        <input type="button" id="Getbtn" value="Get value" />
        <hr class="fancy-line" />
        <p>Things To Do:</p>
        <div id="progressbar">
            <div id="progress">
                <div id="pbaranim"></div>
            </div>
        </div>
        <p>Create CheckBox:</p>
        <input type="text" id="checkBoxName" />
        <input type="button" id="btnSaveCheckBox" value="_Ok" />
        <div id='checkboxes'></div>
        <hr class="fancy-line" />
        <p>
            <img src="/Pages/Images/comment.png" width="40" height="40" style="display: inline-block" />Comments:</p>
    </form>
</div>

的jQuery

$(document).ready(function () {
    $('#btnSaveCheckBox').click(function () {
        addCheckbox($('#checkBoxName').val());
        $('#checkBoxName').val("");
    });

    $(function () {
        $("#progressbar").progressbar({
            value: 0,
            max: 100
        });

    });
});

function addCheckbox(name) {
    var container = $('#checkboxes');
    var inputs = container.find('input');
    var id = inputs.length + 1;

    $('<input />', {
        type: 'checkbox',
        id: 'cb' + id,
        value: name
    }).appendTo(container);
    $('<label />', {
        'for': 'cb' + id,
        text: name
    }).appendTo(container);
    $('<br/>').appendTo(container);
}

难以动态插入CheckBoxes在正确的位置

1 个答案:

Demo Fiddle