Question

我正在尝试使用复选框制作可编辑的核对清单。我希望用户能够将自己的项目添加到此列表中。

在另一位用户的帮助下，我有这么远：
HTML：

<table id="myTable">
    <tr>
        <td>
        <label for="checkbox65">
            <input name="checkbox65" class="checkbox65" type="checkbox" />
            Get directions for where you are going
        </label>
        </td>
    </tr> 
    <tr>
        <td>
            <fieldset data-role="controlgroup">
                <label for="textinput4">
                    Add new item
                    <input name="new_item" id="textinput4" placeholder="" value="" type="text" />
                </label>
            </fieldset>
            <button id="add">Add</button>
        </td>
    </tr>
</table>

使用Javascript：

$('#add').on('click', function (e) {
    var $this = $(this);
    var $firstRow=$this.closest('table').find('tr:first');
    var $newRow = $firstRow.clone();
    $newRow.find(':input').prop('checked', false);
    $newRow.insertAfter($firstRow);
 });

我想要得到的东西看起来有点像这样： What I want

但目前它只是重复带有标签的原始复选框。

Answer 1

假设您需要将复选框旁边的文本设置为您在输入框中输入的内容，您可以执行以下操作：

$('#add').on('click', function (e) {
    var $this = $(this);
    var $firstRow=$this.closest('table').find('tr:first');
    var $newRow = $firstRow.clone();

    var input = $newRow.find(':input').remove();
    input.prop('checked', false);
    $newRow.empty().append(input).append('&nbsp;'+$('#textinput4').val());

    $newRow.insertAfter($firstRow);
});

演示： http://jsfiddle.net/VHe6C/

Answer 2

您可以为复选框添加文本框值

$(document).ready(function(){
$("#addbutton").on("click",function(){
if ($("#goingtoadd").val()!="")
    document.getElementById('adding').innerHTML+='<br/><input name="checkbox65" class="checkbox65" type="checkbox" />'+$("#goingtoadd").val();
    $("#goingtoadd").val("");
})
});

See this Fiddle for Demo

Answer 3

如果有人对基于纯JavaScript的解决方案感兴趣，请点击：

document.querySelector('#add').addEventListener('click', function(e){
    var table = this.parentNode.parentNode.parentNode,
        rowsLen = table.rows.length,
        beforeLastRow = table.rows[rowsLen - 2],
        inputToAdd = document.querySelector('#textinput4');

    var newRow = beforeLastRow.cloneNode(true),
        input = newRow.querySelector('input');

    input.checked = false;

    var label = newRow.querySelector('label');
    label.innerHTML = "";
    label.appendChild(input);
    label.appendChild(document.createTextNode(inputToAdd.value));
    inputToAdd.value = "";

    table.insertBefore(newRow, table.rows[rowsLen - 1]);
}, false);

这是一个测试它的jsFiddle： http://jsfiddle.net/subhamsaha1004/2G9Qv/

如何从用户输入以类似的复选框格式将项添加到列表

3 个答案: