Question

我有一个复选框列表，如果选中了一个复选框，我会将复选框值附加到页面上其他位置的输入字段。如果未选中复选框，我将从隐藏的输入字段中删除该值。发生的事情是，如果正在添加和删除这些值，但是当选中，取消选中，选中，未选中等复选框时，它们会留下一系列逗号。

A）我应该担心吗？ B）如果是的话，我应该如何改变我的添加/追加程序（见下文），还是有更好的方法来做我正在做的事情？我希望最终得到一个干净的列表，例如0_1,0_2,41_4，反对0_1,,,,,,,,,,,,,,,,0_2,,,,41_4,,,,。

    <input type="text" value="0_1,0_2,41_4" id="EOStatus_SelLayers" />

    // example of dataset:  '0_1,0_2,41_4'; 
    if ( xyz.hasClass("icon-check-empty") ) {
        var existing_str = $('#EOStatus_SelLayers').val();
            if (existing_str==null || existing_str==""){
                //add
                $('#EOStatus_SelLayers').val(id);
            }
            else {
                //append    
                $('#EOStatus_SelLayers').val( existing_str + ',' + id);                 
            }
    }
    else {
        $(xyz).removeClass("icon-check").addClass("icon-check-empty");
        var old_str = $('#EOStatus_SelLayers').val();
        var new_str = old_str.replace(','+id,'');
        var new_str = old_str.replace(id,'');
        $('#EOStatus_SelLayers').val(new_str);
    }

在else语句中，我可以这样做：

var new_str = old_str.replace(id,'');  
var new_str = old_str.replace(',,',',');

Answer 1

您可以用空字符串替换id，然后替换任何无关的逗号。

有三个地方你最终可以得到一个无关的逗号：

中间的某个双逗号（需要用一个逗号替换）
一个主要逗号（需要删除）
一个尾随逗号（需要删除）

您可以使用这两个替换操作解决所有三种情况：

.replace(/,,/g, ",").replace(/^,|,$/g, "");

这可能是这样的：

else {
    $(xyz).removeClass("icon-check").addClass("icon-check-empty");
    var old_str = $('#EOStatus_SelLayers').val();
    var new_str = old_str.replace(id,'').replace(/,,/g, ",").replace(/^,|,$/g, "");
    $('#EOStatus_SelLayers').val(new_str);
}

Answer 2

如果您正在使用jQuery - 每次对复选框进行更改时，更简单的方法是简单地重新设置输入值？简单地连接每个ID：已检查的输入...如果您使用自定义库更改复选框的外观，我确定有可以允许以下内容的更改事件触发器工作。

或者，您应该能够根据自己的特定需求进行编辑。

$('input[type=checkbox]').on('change', function(e) {
    var newVal = [];

    $('input[type=checkbox]:checked').each(function() {
        newVal.push($(this).attr('id'));
    });

    $('#EOStatus_SelLayers').val(newVal.join(','));
});

或者，如果您正在使用图片：

$('[class^="icon-check"]').on('click', function(e) {
    var newVal = [];

    $('.icon-check').each(function() {
        newVal.push($(this).attr('id'));
    });

    $(this).toggleClass('icon-check-empty');
    $(this).toggleClass('icon-check');

    $('#EOStatus_SelLayers').val(newVal.join(','));
});

免责声明：未经测试 - 但看起来应该有效。

如何从列表中删除额外的逗号

2 个答案: