Javascript 在正确位置插入复选框时出现问题

当我将卡添加到输入框时。然后可以双击卡片，弹出对话框

当我想在对话框中创建动态复选框时，我在将它们插入正确位置时遇到问题。我想把它们放在输入字段下面，而不是图像下面。我现在真的不知道如何以我描述的方式放置它们。我会感谢你的帮助

Jquery：

$(function () {
    // Click function to add a card
    var $div = $('<div />').addClass('sortable-div');
    $('<label>Title</label><br/>').appendTo($div);
    $('<input/>', {
        "type": "text",
            "class": "ctb"
    }).appendTo($div);
    $('<input/>', {
        "type": "text",
            "class": "date"
    }).appendTo($div);
    var cnt = 0,
        $currentTarget;
    $('#AddCardBtn').click(function () {
        var $newDiv = $div.clone(true);
        cnt++;
        $newDiv.prop("id", "div" + cnt);

        $newDiv.data('checkboxes', []);

        $('#userAddedCard').append($newDiv);
        //      alert($('#userAddedCard').find("div.sortable-div").length);        
    });

    // Double click to open Modal Dialog Window
    $('#userAddedCard').dblclick(function (e) {
        $currentTarget = $(e.target);

        $('#modalDialog #customTextBox').val($currentTarget.children('.ctb').val());
        $('#modalDialog #datepicker').val($currentTarget.children('.date').val());

        $('.allcheckbox').remove(); // Remove checkboxes
        $('#modalDialog').data('checkboxes', []); /* Reset dialog checkbox data */

        /* Add checkboxes from card data */
        $.each($currentTarget.data('checkboxes'), function (i, checkbox) {
            addCheckbox(checkbox.name, checkbox.status);
        });

        $('#modalDialog').dialog({
            modal: true,
            height: 600,
            width: 500,
            position: 'center'
        });
        return false;

    });
    $("#datepicker").datepicker({
        showWeek: true,
        firstDay: 1
    });

    $("#Getbtn").on("click", function () {
        var val = $("#customTextBox").val();
        $currentTarget.find(".ctb").val(val);
        $currentTarget.find(".date").val($("#datepicker").val());

        $currentTarget.data('checkboxes', $('#modalDialog').data('checkboxes')); /* Copy checkbox data to card */

        $('#modalDialog').dialog("close");
    });

    // Add a new checkBox
    $('#btnSaveCheckBox').click(function () {
        addCheckbox($('#checkBoxName').val());
        $('#checkBoxName').val("");
    });

    function addCheckbox(name, status) {
        status = status || false;

        var container = $('#modalDialog');
        var inputs = container.find('input');
        var id = inputs.length + 1;
        var data = {
            status: status,
            name: name
        };

        var div = $('<div />', { class: 'allcheckbox' });
        $('<input />', {
            type: 'checkbox',
            id: 'cb' + id,
            value: name
        }).prop('checked', status).on('change', function () {
            data.status = $(this).prop('checked');
        }).appendTo(div); /* set checkbox status and monitor changes */

        $('<label />', {
            'for': 'cb' + id,
            text: name
        }).appendTo(div);

        div.appendTo(container);

        container.data('checkboxes').push(data);
    }

});

$（函数（）{
//单击“功能”添加卡
var$div=$（''）.addClass（'sortable-div'）；
$（'Title
'）。附录（$div）；
$('', {
“类型”：“文本”，
“类别”：“ctb”
}).appendTo（$div）；
$('', {
“类型”：“文本”，
“类别”：“日期”
}).appendTo（$div）；
var cnt=0，
$currentTarget；
$（'#AddCardBtn'）。单击（函数（）{
var$newDiv=$div.clone（true）；
cnt++；
$newDiv.prop（“id”、“div”+cnt）；
$newDiv.data（'复选框'，[]）；
$（'#userAddedCard'）。追加（$newDiv）；
//警报（$（'userAddedCard'）.find（“div.sortable-div”）.length）；
});
//双击打开模态对话框窗口
$（'#userAddedCard'）.dblclick（函数（e）{
$currentTarget=$（e.target）；
$（'#modalDialog#customTextBox'）.val（$currentTarget.children（'.ctb'）.val（））；
$（'.#modalDialog#datepicker'）.val（$currentTarget.children（'.date'）.val（））；
$（'.allcheckbox'）.remove（）；//删除复选框
$（'#modalDialog'）.data（'复选框'，[]）；/*重置对话框复选框数据*/
/*从卡数据中添加复选框*/
$.each（$currentTarget.data（'checkbox'），函数（i，checkbox）{
addCheckbox（checkbox.name，checkbox.status）；
});
$（'modalDialog'）。对话框({
莫代尔：是的，
身高：600，
宽度：500，
位置：'中心'
});
返回false；
});
$（“#日期选择器”）。日期选择器({
《秀周刊》：没错，
第一天：1
});
$（“#Getbtn”）。在（“单击”，函数（）{
var val=$（“#customTextBox”）.val（）；
$currentTarget.find（“.ctb”）.val（val）；
$currentTarget.find（“.date”）.val（$（“#日期选择器”）.val（））；
$currentTarget.data（'复选框'，$（'modalDialog'）.data（'复选框'）；/*将复选框数据复制到卡*/
$（'modalDialog'）。对话框（“关闭”）；
});
//添加一个新的复选框
$（'#btnSaveCheckBox'）。单击（函数（）{
addCheckbox（$（'#checkBoxName'）.val（）；
$（'#checkBoxName'）.val（“”）；
});
函数addCheckbox（名称、状态）{
状态=状态| |假；
变量容器=$（“#modalDialog”）；
var inputs=container.find（'input'）；
变量id=输入。长度+1；
风险值数据={
状态：状态，
姓名：姓名
};
var div=$（''，{class:'allcheckbox'}）；
$('', {
键入：“复选框”，
id:'cb'+id，
值：name
}).prop（'checked'，status.）.on（'change'，function（）{
data.status=$（this.prop（'checked'）；
}).appendTo（div）；/*设置复选框状态并监视更改*/
$('', {
‘for’：‘cb’+id，
文本：名称
}).附件（分部）；
附件组（容器）；
container.data（“复选框”）.push（数据）；
}
});

试试这个

html

---

您是否已尝试在“添加”按钮后添加

，并按类名将复选框附加到该div中

YourCheckbox.appendTo（$（“.divforcheckbox”））

？我尝试添加您代码的该部分，但似乎不起作用。你想试试吗？我在Js.Hmmm中有一个演示。我遇到了以下错误：无法获取未定义或空引用的属性“push”

$（“#boxs”）。数据（'checkbox'，[]）；/*重置对话框复选框数据*/$（“#boxs”）。数据（“复选框”）；/*复制复选框数据*/

        <div id="boxs"></div>

  var container = $('#boxs');
  ...
  $('#boxs').data('checkboxes')); /* Copy checkbox data  */
  ...    
  $('#boxs').data('checkboxes', []); /* Reset dialog checkbox data */