Isotope - checkboxes & URL Hash

index.html

<div id="form-ui">
<p>
  <label><input type="checkbox" value=".red" /> red</label>
  <label><input type="checkbox" value=".green" /> green</label>
  <label><input type="checkbox" value=".blue" /> blue</label>
  <label><input type="checkbox" value=".orange" /> orange</label>
</p>

  <p id="output">--</p>
  
</div>

<div id="container">
  <!-- items added with JS -->
</div>

isotope-checkboxes-url-hash.markdown

Isotope - checkboxes & URL Hash

A Pen by A973C on CodePen.

License.

script.js

// templating
var colors = [ 'red', 'green', 'blue', 'orange' ];
var sizes = [ 'small', 'medium', 'large' ];
var prices = [ 10, 20, 30 ];

createItems();

var $output = $('#output');

// filter with selects and checkboxes
var $checkboxes = $('#form-ui input');

$checkboxes.change( function() {
  // map input values to an array
  var inclusives = [];
  // inclusive filters from checkboxes
  $checkboxes.each( function( i, elem ) {
    // use value if checked
    if ( elem.checked ) {
      inclusives.push( elem.value );
    }
  });
  // combine inclusive filters
  var filterValue = inclusives.join(',');
  // set filter in hash
  location.hash = 'filter=' + encodeURIComponent( filterValue );
});

var $container = $('#container');

function onHashchange() {
  var hashFilter = getHashFilter();
  // show filter for demo
  $output.text( hashFilter || '*' );
  // filter isotope
  $container.isotope({
    itemSelector: '.item',
    filter: hashFilter,
  });
}

$(window).on( 'hashchange', onHashchange );

// init Isotope with hash filter
onHashchange();

// set initial checkboxes from hash
var hashFilter = getHashFilter();
if ( hashFilter ) {
  var filters = hashFilter.split(',');
  filters.forEach( function( filter ) {
    var $checkbox = $checkboxes.filter('[value="' + filter + '"]');
    $checkbox.attr( 'checked', 'checked' );
  });
}

function getHashFilter() {
  var hash = location.hash;
  // get filter=filterName
  var matches = location.hash.match( /filter=([^&]+)/i );
  if ( !matches ) {
    return '';
  }
  return decodeURIComponent( matches[1] );
}

//------------


function createItems() {

  var $items;
  // loop over colors, sizes, prices
  // create one item for each
  for (  var i=0; i < colors.length; i++ ) {
    for ( var j=0; j < sizes.length; j++ ) {
      for ( var k=0; k < prices.length; k++ ) {
        var color = colors[i];
        var size = sizes[j];
        var price = prices[k];
        var $item = $('<div />', {
          'class': 'item ' + color + ' ' + size + ' price' + price
        });
        $item.append( '<p>' + size + '</p><p>$' + price + '</p>');
        // add to items
        $items = $items ? $items.add( $item ) : $item;
      }
    } 
  }

  $items.appendTo( $('#container') );

}

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://npmcdn.com/isotope-layout@3/dist/isotope.pkgd.js"></script>

style.css

* { box-sizing: border-box; }

body { font-family: sans-serif; }

.item {
  width: 100px;
  height: 100px;
  float: left;
  
  margin: 5px;
  padding: 5px;
}

.item p {
  margin: 0;
}

.red { background: #F33; }
.blue { background: #88F; }
.green { background: #3A3; }
.orange { background: orange;}

select, label, input { font-size: 20px; }

label { margin-right: 10px; }