在jQuery中选中复选框时附加文本框。

Question

在这里，我有一堆复选框，在它们各自的div中。

我想为至少有一个复选框的每个div附加一个文本框到div#tables，反之亦然。

演示：小提琴

我该怎么做？有人能帮我吗？

<select id="count" style="float:left;">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
</select>
<div style="float:left;" id="tables"></div>
<br/>
<br/>
<div class="checkbox" data-toggle="false" data-min="2" data-type="t1" style='float:left;background:yellow;width:100px'>
    <input id="checkbox-1" type="checkbox" name="Data1" value="option1" />
    <label for="checkbox-1">HTML</label>
    <br />
    <input id="checkbox-2" type="checkbox" name="Data2" value="option2" />
    <label for="checkbox-2">CSS</label>
    <br />
    <input id="checkbox-3" type="checkbox" name="Data3" value="option3" />
    <label for="checkbox-3">HTML</label>
    <br />
    <input id="checkbox-7" type="checkbox" name="Data7" value="option7" />
    <label for="checkbox-7">HTML</label>
    <br />
</div>
<div class="checkbox" data-toggle="false" data-min="3" data-type="t1" style='float:left;margin-left:100px;background:brown;width:100px'>
    <input id="checkbox-4" type="checkbox" name="Data4" value="option4" />
    <label for="checkbox-4">CSS</label>
    <br />
    <input id="checkbox-5" type="checkbox" name="Data5" value="option5" />
    <label for="checkbox-5">HTML</label>
    <br />
    <input id="checkbox-6" type="checkbox" name="Data6" value="option6" />
    <label for="checkbox-6">CSS</label>
    <br />
    <input id="checkbox-8" type="checkbox" name="Data8" value="option8" />
    <label for="checkbox-8">HTML</label>
</div>

jQuery

$(document).ready(function () {
    $('#count').on('change', function () {
        //do stuff here
        //my random "on change" behaviour {
        var chkboxes = $('input[type=checkbox]:checked');
        var txtboxes = $('input[type=text]');

        for (var i = 0; i < chkboxes.length; i++) {
            $(chkboxes[i]).prop('checked', false);
        }
        for (var i = 0; i < txtboxes.length; i++) {
            $(txtboxes[i]).remove();
        }
    });

    $('input[type=checkbox]').on('change', function (e) {
        //this was deselected no need to check?
        if ($(this).prop('checked')) {
            var parent = $($(this).parent()[0]);
            var newtextbox = '<input type="text" value="' + parent + '"/>';
            $("#tables").append(newtextbox); //append table
        }

        if (!$(this).prop('checked')) {
            return false;
        }
    });
});

提前谢谢。

Answer 1

我将id添加到附加的textarea中，以便能够知道它们是否存在。

var newtextbox = '<input id="textarea_'+classname+'" type="text" value="' + parent + '"/>';

反之亦然，我使用了remove jquery方法。

$("#textarea_"+classname).remove();

你能检查一下这把小提琴吗？演示