Jquery 基于复选框从文本框中删除值

我在单击复选框时填充一个文本框，并使用它们的值（逗号分隔）现在我想在复选框未选中时从文本框中删除该值

这就是我现在的处境：

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

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

下面是一个例子：

苹果、梨、桃、香蕉

当我去掉“梨”和“香蕉”时，它工作得很好，但当我去掉“苹果”时，它不工作，因为苹果是第一个，并且没有逗号

---

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

---

谢谢

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

以下示例使用的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

---

完全重建状态比拼接/删除阵列中的项目容易得多。试试这个

$('.checkboxes').change(function () {
    var values = $('.checkboxes:checked').map(function() {
        return this.value;
    }).get().join(',');
    $('.DISTRIBUTION').val(values);
});

---

使用两个替换语句。像

var current = $('.DISTRIBUTION').val().replace($(this).val(), "").replace(",","");

---

您可以重写所有文本：

试一试

看

保留订单

var checkedItems = [];

$('.checkboxes').on('change', function() {
    var value = $(this).val(),
        pos = $.inArray(value, checkedItems);

    if (pos == -1) {
        checkedItems.push(value);
    } else {
        checkedItems.splice(pos, 1);
    }

    $('.DISTRIBUTION').val(checkedItems.join(','));
});

看

明白了

 $(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')) {
                if ($('.DISTRIBUTION').val().indexOf($(this).val()) == 0) {
                    var current = $('.DISTRIBUTION').val().replace($(this).val()+",", "");
                }
                else {
                    var current = $('.DISTRIBUTION').val().replace("," + $(this).val(), "");
                }
            }
            $('.DISTRIBUTION').val(current);
        });
    });

---

用于从选择器中的每个元素返回指定属性的数组。噢，现在我明白为什么我没有这样做了，我需要文本框按我选中项目的顺序添加项目。。。现在它将它们按复选框在屏幕上出现的顺序排列。但我如何知道它是列表中的第一个值？为什么需要第一个值。顺序不重要。我需要文本框按我检查项目的顺序添加项目。。。现在，它把他们的顺序复选框出现在屏幕上我需要文本框添加项目的顺序我检查他们。。。现在，它将它们按复选框在屏幕上出现的顺序排列

$('.checkboxes').change(function () {
    var value = [];

    $(".checkboxes:checked").each(function(index, elem){
        value.push( $(elem).val() );
    });

    $(".DISTRIBUTION").val(value);    

 });

$('.checkboxes').on('change', function() {
    var values = $.map($('.checkboxes:checked'), function(n, i) {
        return n.value;
    }).join(',');

    $('.DISTRIBUTION').val(values);
});

var checkedItems = [];

$('.checkboxes').on('change', function() {
    var value = $(this).val(),
        pos = $.inArray(value, checkedItems);

    if (pos == -1) {
        checkedItems.push(value);
    } else {
        checkedItems.splice(pos, 1);
    }

    $('.DISTRIBUTION').val(checkedItems.join(','));
});

 $(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')) {
                if ($('.DISTRIBUTION').val().indexOf($(this).val()) == 0) {
                    var current = $('.DISTRIBUTION').val().replace($(this).val()+",", "");
                }
                else {
                    var current = $('.DISTRIBUTION').val().replace("," + $(this).val(), "");
                }
            }
            $('.DISTRIBUTION').val(current);
        });
    });