Are the values ​​displayed one by one, instead of one?

Question

JavaScript

There is a code:
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>

and

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

It is necessary to display the selected checkboxes on the page in p with id 'result' value, and if there are more than one checkboxes, then it is necessary to display the first one and write + (number of more selected + more). Now if more than one is selected, then each selected one is displayed in turn, instead of the first one, how can I solve the problem .... ??

Answer 1

It is enough just to take the output from the loop:

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