0

チェックボックスを使用して、編集可能なチェックリストを作成しようとしています。私が欲しい機能の 1 つは、ユーザーが自分のアイテムをこのリストに追加できるようにすることです。

別のユーザーの助けを借りて、ここまで来ました:
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

チェックボックスのテキストボックス値を追加できます

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

この Fiddle for Demo を参照してください

于 2012-12-04T15:57:24.140 に答える
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 に答える