javascript - JQuery如何获取CheckBox的ID？

Question

我想，当我双击卡片时弹出对话框。然后可以创建动态复选框。创建复选框时，可以编辑每个复选框的文本。如果我有例如，问题就来了。创建了 3 个复选框并想要编辑其中一个，所有其他复选框的名称与我要编辑的复选框相同。您可以在下图中看到问题:

J查询:

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

        var container = $('#divboxs');
        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);

        var $editCheckBox = $('<p />', {
            class: 'editCheckBox',
            text: 'Edit'
        }).appendTo(div);

        div.appendTo(container);

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

        $('#divboxs').on('click', '.editCheckBox', function () {
        var text = $(this).parents(".allcheckbox").find("label").text();
        var input = $('<input id="attribute" value="' + text + '" />')
        $('.allcheckbox').text('').append(input);
        input.select();

        input.blur(function () {
            var text = $('#attribute').val();
            $('#attribute').parent().text(text);
            $('#attribute').remove();
        });
    });    

});

我认为这是给我带来问题的代码部分: var input = $('<input id="attribute" value="' + text + '" />')

我想我应该使用 CheckBox 的 ID:id: 'cb' + id , 而不是 id="attribute" .怎么在这个地方插入checkBox的id？

Live Demo

Answer 1

好的。因此，您的代码存在一些问题。

第一个存在。您将新创建的输入附加到所有“allcheckbox”类元素

$('.allcheckbox').text('').append(input);

第二个问题是在同一行中清空整个 DIV。一旦您想用新值更新输入和标签，这就会产生问题。

因此，隐藏任何您不想显示的元素，一旦调用模糊事件，删除新输入，更新值，然后显示您之前隐藏的元素。

在下面找到更新的 fiddle : http://jsfiddle.net/62QY8/122/

此外，还有一点旁注。 “类”是一个 JavaScript 保留字。所以宁愿使用“类名”。即。

    var $editCheckBox = $('<p />', {
        classname: 'editCheckBox',
        text: 'Edit'
    }).appendTo(div);