Jquery .map().join(" , ") 文本未加入逗号 (,)

Question

我正在使用 label 和隐藏输入 checkbox 以及 .change 复选框。我通过 Jquery .map() 获取标签文本，并希望 .join(",") 文本带有 ,.

文本即将出现，一切正常，但逗号 (,) 无论如何都不会出现。

I'm getting result Checkbox 1Checkbox 2Checkbox 5 and I want Checkbox 1, Checkbox 2, Checkbox 5

突出显示代码：

$(".combo").append( $(txt).map(function() {
    return $(this).text();
}).get().join( " ," ) );

代码：

var checked = [];
$('input[type="checkbox"]').change(function(e) {
    var num_checked = $('input[type="checkbox"]:checked').length;

    if (num_checked > 3) {
        checked[checked.length - 1].prop('checked', false);
        if(checked[checked.length - 1].prop('checked', false)){
            checked[checked.length - 1].parents('label').removeClass("active");
            var et = checked[checked.length - 1].parents('label').text();
            $('.combo').text(function () {
                return $(this).text().replace(et, '');  
            });

        }
        checked.pop();
    }
    if($.inArray($(this), checked) < 0){
        checked.push($(this));
        if($(this).is(':checked')){
            $(this).parents('label').addClass("active");
            var txt = $(this).parents('label');
            $(".combo").append( $(txt).map(function() {
                return $(this).text();
            }).get().join( " ," ) );

        } else{
            $(this).parents('label').removeClass("active-cb");
            //$('.selectedSwitch').text('');
            var qr = $(this).parents('label').text();
            $('.combo').text(function () {
                return $(this).text().replace(qr, '');  
            });
        }
    }
});

Answer 1

因为 txt 变量没有返回数组，地图函数你现在每次点击只选择一个元素，而不是为选中的元素，而是将 txt 更改为在选择器内部选中所以 :

$(".combo").append( $(checked).map(function(i,e) {
    return $(e).closest('label').text();
}).get().join(','));

并确保将 $(".combo").empty(); 放在更改事件之后，以避免从先前检查的未检查文本中附加文本。

工作DEMO

Answer 2

恐怕您在这里过度设计了您的解决方案。请看这个简化版：

$('input[type="checkbox"]').change(function(e) {
    // just grab the labels for all checked inboxes...
    var txt = $('input:checked').closest('label')
        // then map that collection to their text values
        .map(function() { return $(this).text(); })
        // and format into your comma-delineated list
        .get().join(', ');

    $('.combo').text(txt);
});

您可以在此处查看实际效果：https://jsfiddle.net/usx8Lkc5/11/

Jquery .map().join(" , ") 文本未加入逗号 (,)

Jquery .map().join(" , ") text is not joining the comma (,)

jquery

text

dictionary

join

onchange