Question

无论我在复选框列表中查看了多少项目，当我查看表格时我要添加一行，只有选中的第一个复选框的值才会添加到我的表格中。我试图通过每个并抓取每个复选框的值插入，但它似乎没有工作。我搞砸的任何线索？

在我的jquery中，我正在运行一个if语句，以防止在取消选中某个框时向我的表添加undefined。

这是一个jsfiddle，展示了我在做什么：http://jsfiddle.net/22L9x006/

$(document).on('click', 'input:checkbox[name=certsToValid]', function() {
$newTableRow = '<tr><td><p>' + $('[name=certsToValid]:checked').val() + '</p></td><td><input type="text" placeholder="Credential #..." class="certInput" /></td><td><p>$5.00</p></td><td><div class="removeRow"></div></td></tr>';
$(this).attr('value');
if($.each($('input:checkbox[name=certsToValid]').is(':checked')) && $(this) != undefined) {
    $('.certSelections').append($newTableRow); 
}
});

Answer 1

我刚刚调整了Fiddle，因此带有单击复选框值的选项会添加到表格中。调整是改变

$newTableRow = '<tr><td><p>' + $('[name=certsToValid]:checked').val() + ...

到

$newTableRow = '<tr><td><p>' + $(this).val() + ...

这不是我想你的完全解决方案，例如想要在取消选中复选框时删除一行，目前每个复选框点击都会添加一行，但我想你可以从这里开始工作。

Answer 2

目前尚不清楚您的目标是什么，但编写代码的正确方法是：

$(document).on('change', ':checkbox[name=certsToValid]', function() {
    $(this).filter(':checked').each(function() {
        $newTableRow = '<tr><td><p>' + this.value + '</p></td><td><input type="text" placeholder="Credential #..." class="certInput" /></td><td><p>$5.00</p></td><td><div class="removeRow">REMOVE</div></td></tr>';
        $('p:contains(' + this.value + ')','.certSelections tbody').length ||
            $('.certSelections tbody').append($newTableRow);
    });
});
$(document).on('click', 'div.removeRow', function() {
    $(this).closest('tr').remove();
});

DEMO

如果您可以澄清您尝试实现的目标，那么可以改进此答案，以便更好地指导您实现目标。

Answer 3

以下是PeterKA答案的扩展。代码与他的相同。我只添加了一种＆＃34;过滤＆＃34;避免重复的行。

 $(document).on('change', ':checkbox[name=certsToValid]', function () {
        $(this).filter(':checked').each(function () {
            $newTableRow = '<tr><td><p>' + this.value + '</p></td><td><input type="text" placeholder="Credential #..." class="certInput" /></td><td><p>$5.00</p></td><td><div class="removeRow">REMOVE</div></td></tr>';

            var optionValue = this.value;

            var added = false;

            $('.certSelections td:first-child p').each(function (index) {

                if ($(this).text() === optionValue) {
                    added = true;
                }
            });

            //only add if it's not found in the table  
            if (!added) {

                $('.certSelections tbody').append($newTableRow);
            }
        });

    });

Fiddle

只有第一个复选框值被添加到我的表中

3 个答案: