仅在javascript

Question

我有一个网站，我有一个带有某些选项的搜索表。您可以在这里查看它：https://www.travelstuff.be/search/。因为它是荷兰语，所以我将指导您完成整个过程。

当您查看页面左侧时，您会看到2个带有蓝色正方形的列表（“类型”和“默克”（“默克”对于“品牌”是荷兰语）。

问题出在“默克”列表中。它会变得很长。目前，仅显示12个复选框，但是当我添加更多品牌时，列表将变长（显然）。

我想在JavaScript中创建一个小片段，只显示前5个（或10个）复选框和下面的一个按钮。单击该按钮时，将显示所有复选框。

我使用Twig来渲染布局，它是这样渲染的：

<div class="filter">
    <div class="title">Merk</div>
    <label><input type="checkbox" name="..." class="..." />...</label>
    <label><input type="checkbox" name="..." class="..." />...</label>
    <label><input type="checkbox" name="..." class="..." />...</label>
    <label><input type="checkbox" name="..." class="..." />...</label>
    <label><input type="checkbox" name="..." class="..." />...</label>
    ...
</div>

从技术上讲，将前5个标签包裹在另一个div中是不可能的（由于Twig的限制）。还有另一种方法吗？我真的不知道如何查找这样的问题，我认为这里有解决方案，但是我不知道在哪里寻找。英语不是我的母语。

谢谢！

编辑

这是我的“解决方案”。

$('.filter').each(function(){
    var self = $(this);
    var labels = self.find('label');
    var labelsSelected = self.find('label[data-selected="true"]').length;
    if(labelsSelected == 0){
        self.find('label:gt(4)').hide();
        var $a = $('<a href="#" />').html('Meer').appendTo(self);
        $a.on('click', function(e){
            e.preventDefault();
            self.find('label').show();
            $(this).remove();
        });
    };
});

首先，我遍历每个过滤器。我得到了所有标签，然后检查是否选中了任何复选框。如果是这样，则必须显示所有标签。如果没有，则必须仅显示5个前标签。