each() 切换复选框在 jQuery 中附加此值 else if 语句答案

【问题标题】：each() toggle checkboxes append this value else if statement in jQueryeach() 切换复选框在 jQuery 中附加此值 else if 语句
【发布时间】：2014-08-08 15:34:23
【问题描述】：

var CheckFUN = function() {
    var numberCheckedVAR = $('input:checkbox:checked').length;
    $('#checkMonitorNUMBER').text(numberCheckedVAR);

    var $checkMonitor = $('#checkMonitor').empty();
    $('.GruppoCheck :checkbox:checked').each(function() {
        if(numberCheckedVAR <= 1){
            $checkMonitor.append('<span>#' + $(this).val() + '#</span>');
        }
        else if(numberCheckedVAR >= 2){
            $checkMonitor.append('<span>@' + $(this).val() + '@</span>');
        }
    });
}

$('.GruppoCheck input[type="checkbox"]').change(function(){
    CheckFUN();
});

如果我在序列中切换，现在它不能正常工作：

@aaaaaaa@@bbbbbbb@@ccccccc@

我只在第一次切换复选框时需要它，只有第一个元素有#，我想要的结果是这样的：

#aaaaaaa#@bbbbbbb@@ccccccc@

DEMO.

【问题讨论】：

jsfiddle.net/2vMhq希望这是你想要的
@Satpal 绝对完美！发布答案，我会接受它！ :) 非常感谢！
@user3746998，另一种方式jsfiddle.net/73hXT。对对您最有帮助的最佳答案给出公认的答案

标签： jquery if-statement append each

【解决方案1】：

使用index 知道.each() 循环中的第一个元素，如下所示：

$('.GruppoCheck :checkbox:checked').each(function(index) {
        if(index== 0){
            $checkMonitor.append('<span>#' + $(this).val() + '#</span>');
        }
        else {
            $checkMonitor.append('<span>@' + $(this).val() + '@</span>');
        }
    });

Demo

【讨论】：

【解决方案2】：

试试

var CheckFUN = function () {
    //cache the checked items reference for future use
    var $checked = $('input:checkbox:checked');
    $('#checkMonitorNUMBER').text($checked.length);

    //set the content using .html() - no need to call .empty() as a separate call
    $('#checkMonitor').html(function () {
        //use .map() convert the checked element collection to a html representation
        return $checked.map(function (idx, el) {
            var seperator = idx == 0 ? '#' : '@';
            return '<span>' + seperator + this.value + seperator + '</span>'
        }).get().join('')
    })
}

演示：Fiddle

【讨论】：

【解决方案3】：

var CheckFUN = function() {
    var numberCheckedVAR = $('input:checkbox:checked').length;
    $('#checkMonitorNUMBER').text(numberCheckedVAR);

    var $checkMonitor = $('#checkMonitor').empty();
    $('.GruppoCheck :checkbox:checked').each(function(index) {
        if(index == 0){
            $checkMonitor.append('<span>#' + $(this).val() + '#</span>');
        }
        else{
            $checkMonitor.append('<span>@' + $(this).val() + '@</span>');
        }
    });
}


$('.GruppoCheck input[type="checkbox"]').change(function(){
    CheckFUN();
});

演示：

http://jsfiddle.net/cqvt8/

【讨论】：