Isotope filter with checkbox or select options with multiple choices

Question

I tried to find how to make a classic checkbox filter group with my existing data-filter method but what I find on internet, they are all combined or use value, etc (https://codepen.io/desandro/pen/JGKyrY or https://codepen.io/desandro/pen/DeGjdQ for example). Certainly it would give some idea how to integrate for my existing codes but I am not so smart with too complex jQuery. In Isotope website there is no option to search (I did not find).

My isotope initiation and functions for buttons (I do not use it anymore) and select options filtering :

var $grid = $('.grid')
$grid.isotope({
    layoutMode: 'fitRows',
    itemSelector: '.box',
    stagger: 30, // item transitions 30ms after one another
    filter: '', // shown by default
    percentPosition: true,
    fitRows: {
        //columnWidth:'.box',
        gutter: 20,
        //isFitWidth: true
    },
    getSortData: {
        number: '.number parseInt'
    }
});
$('.grid').isotope('layout');
// store navfilter for each group
var navfilters = {};


// FILTER WITH SELECT OPTIONS
$('.filters-nav').on( 'click', '.navbttn', function() {
    var $this = $(this);
    // get group key
    var $bttnGroup = $this.parents('.navgroup');
    var fltGroup = $bttnGroup.attr('data-filter-group');
    // set filter for group
    navfilters[ fltGroup ] = $this.attr('data-filter');
    // combine filters
    var navfilterValue = cntValues(navfilters);
    // set filter for Isotope
    $grid.isotope({ 
        filter: navfilterValue,
        animationOptions: {
            duration: 650,
            easing: 'ease',
            stagger: 30, // item transitions 30ms after one another
            queue: false
        }
    });
}); 


// ACTIVE BUTTONS AND SELECTS
$('.navgroup').each( function( i, bttnGroup ) {
    var $bttnGroup = $( bttnGroup );
    $bttnGroup.on( 'click', 'option', function() {
        $bttnGroup.find('.active').removeClass('active');
        $( this ).addClass('active');
    });
});

// FLATTEN OBJECT BY CONCATTING VALUES
function cntValues( obj ) {
    var value = '';
    for ( var prop in obj ) {
        value += obj[ prop ];
    }
    return value;
}   

// SORT BUTTON CLICK
$('.filters-nav').on('click', '.sortbttn', function() {
    var sortValue = $(this).attr('data-sort-value');
    $grid.isotope({sortBy: sortValue});
});
$('.sortgroup').each( function( i, bttnGroup ) {
    var $bttnGroup = $( bttnGroup );
    $bttnGroup.on( 'click', 'button', function() {
        $bttnGroup.find('.active').removeClass('active');
        $( this ).addClass('active');
    });
});

My structure and codes are here: https://jsfiddle.net/igorlaszlo/1mbvretn/2/

I would like to change the characteristics filter group from select options with single choice :

<select>
    <option class="navbttn active" data-filter="">all</option>
    <option class="navbttn" data-filter=".forest">forest</option>
    <option class="navbttn" data-filter=".hill">hill</option>
    <option class="navbttn" data-filter=".montain">montain</option>
    <option class="navbttn" data-filter=".lake">lake</option>
    <option class="navbttn" data-filter=".sea">sea</option>
    <option class="navbttn" data-filter=".panorama">panorama</option>
</select>

or 1) to checkboxes with multiple choices :

   <label><input type="checkbox" class="navbttn active" data-filter="" />all</label>
   <label><input type="checkbox" class="navbttn" data-filter=".forest" />forest</label>
   <label><input type="checkbox" class="navbttn" data-filter=".hill" />hill</label>
   <label><input type="checkbox" class="navbttn" data-filter=".montain" />montain</label>
   <label><input type="checkbox" class="navbttn" data-filter=".lake" />lake</label>
   <label><input type="checkbox" class="navbttn" data-filter=".sea" />sea</label>
   <label><input type="checkbox" class="navbttn" data-filter=".panorama" />panorama</label>

or 2) remaining at the select options but with multiple choices if it exists.