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

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 答案的扩展。代码与他的相同。我只添加了一种“过滤”以避免重复行。

 $(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