2

单击复选框时，我会填充一个文本框，其值（逗号分隔）现在我想在未选中复选框时从文本框中删除该值。

这是我现在的位置：

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

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

这是一个例子：

苹果、梨、桃、香蕉

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

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

谢谢！

4

6 回答 6

4

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

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

这是一个工作示例

按选择顺序排列的值

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

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

这是一个工作示例

于 2013-09-18T13:25:19.350 回答
2

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

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

示例小提琴

于 2013-09-18T13:27:41.487 回答
0

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

var current = $('.DISTRIBUTION').val().replace($(this).val(), "").replace(",","");
于 2013-09-18T13:28:07.480 回答
0

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

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

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

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

 });
于 2013-09-18T13:30:34.557 回答
0

尝试

$('.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/

于 2013-09-18T13:40:45.670 回答
0

知道了！

 $(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);
        });
    });
于 2013-09-18T13:47:46.330 回答