Выводятся значения по очереди, вместо одного?

Question

[PhilippI]

Есть код:
Html:

<label class="checkbox"><input type="checkbox" value="значение 1">checkbox 1</label><br>
<label class="checkbox"><input type="checkbox" value="значение 2">checkbox 2</label><br>
<label class="checkbox"><input type="checkbox" value="значение 3">checkbox 3</label><br>
<label class="checkbox"><input type="checkbox" value="значение 4">checkbox 4</label>
<p>
<button id="btn" class="btn btn-sm btn-default">Получить отмеченные</button>
</p>
<p id="result" class="text-success"></p>

и

$(document).ready(function() {
$('#btn').click(function(){
$('#result').html('');
var heig = [];
$("input:checkbox:checked").each(function(){
heig.push($(this).val());
$('#result').append(heig[0] + ' and '+(heig.length-1)+' more')});	
});});

Необходимо выводить на страницу в p с id 'result' value выбранных чекбоксов, и если чекбоксов больше одного, то необходимо выводить первый и писать + (количество еще выбранных + more). Сейчас если выбрано больше одного, то выводится каждый выбранный по очереди, вместо одного первого, как можно решить задачу.... ??

Answer 1

[Ilya Loginov]

Достаточно просто вынести вывод из цикла:

$(document).ready(function() {
    $('#btn').click(function(){
        $('#result').html('');
        var heig = [];
        $("input:checkbox:checked").each(function(){
            heig.push($(this).val());
        });
        $('#result').append(heig[0] + ' and '+(heig.length-1)+' more');
    });
});