0

我正在尝试使用复选框制作可编辑的清单。我想要的一项功能是让用户能够将自己的项目添加到此列表中。

在另一个用户的帮助下，我已经做到了这一点：
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);
 });

我想要得到的是看起来有点像这样的东西： 我想要什么

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

4

3 回答 3

0

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

$('#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/

于 2012-12-04T15:52:11.480 回答
0

如果有人对基于纯 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/

于 2013-10-10T07:03:55.530 回答
0

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

$(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("");
})
});

看到这个小提琴演示

于 2012-12-04T15:57:24.140 回答