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

Answer 2

完全重建状态要容易得多，而不是从数组中拼接/删除项目。试试这个;

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

Example fiddle

Answer 3

使它成为两个替换语句。像

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

Answer 4

您可以重写所有文字：http://jsfiddle.net/kkYaZ/1/

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

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

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

 });

Answer 5

尝试

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

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

请参阅http://jsfiddle.net/2xebK/1/

保留订单

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

请参阅http://jsfiddle.net/2xebK/3/

Answer 6

得到了它！

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

基于复选框从TextBox中删除值

6 个答案: