jquery - 根据复选框从文本框中删除值

Question

我在单击复选框时填充文本框，并使用它们的值(逗号分隔)现在我想在取消选中复选框时从文本框中删除该值。

这就是我现在所在的位置:

$(document).ready(function () {
    $('.checkboxes').change(function () {
        if ($(this).is(':checked')) {
            if ($('.DISTRIBUTION').val().length == 0) {
                var current = $('.DISTRIBUTION').val() + $(this).val() + ",";
            }
            else {
                var current = $('.DISTRIBUTION').val() + "," + $(this).val();
            }               
        }
        else if ($(this).not(':checked')) {
            var current = $('.DISTRIBUTION').val().replace(","+$(this).val(), "");
        }
        $('.DISTRIBUTION').val(current);
    });
});

效果很好!除了第一个值，它前面没有逗号。我该如何处理这种情况？我如何找出要删除的值实际上是文本框中的第一项？

这是一个例子:

苹果、梨、桃子、香蕉

当我删除“，梨”和“，香蕉”时，它工作正常，但是当我到达“，苹果”时，它不起作用，因为苹果是第一个并且没有逗号。

注意:我需要文本框按照我检查的顺序添加项目...如果我每次即时重建复选框列表，它会按照它们在屏幕上出现的顺序而不是顺序添加它们我点击。

谢谢!

Answer 1

我建议每次都重建一个新值，而不是尝试插入和删除现有值。

以下示例使用的 HTML 如下:

<input type="checkbox" class="fruit" value="apple" />Apple
<input type="checkbox" class="fruit" value="banana" />Banana
<input type="checkbox" class="fruit" value="peach" />Peach
<input type="checkbox" class="fruit" value="pear" />Pear

按出现顺序排列的值

要按照值在 DOM 中出现的顺序显示值，您可以执行以下操作:

function setValue() {
    var items = $(".fruit");
    var result = [];
    for (var i = 0; i < items.length; i++) {
        var item = $(items[i]);
        if (item.is(":checked")) {
            result.push(item.val());
        }
    }
    var text = result.join(",");
    $(".DISTRIBUTION").val(text);
}

Here is a working example

按选择顺序排列的值

如果您想保留它们的选择顺序，那么您可以这样做:

var results = [];

$(".fruit").change(function () {
    var item = $(this).val();
    var index = results.indexOf(item);
    if ($(this).is(":checked")) {
        if (index == -1) {
            results.push(item);
        }
    } else {
        if (index > -1) {
            results.splice(index, 1);
        }
    }
    $(".DISTRIBUTION").val(results.join(","));
});

Here is a working example