Create URL using data obtained from filters

var FilteredNav = {
  wrapper: $(".dept-filters")
  , init: function() {
    FilteredNav.changeUrl();
    $.each(FilteredNav.wrapper, FilteredNav.createUrl);
  }
  , createUrl: function() {
    var urlItems = [];

    var self = $(this).closest(FilteredNav.wrapper)
    , checkedInput = self.find('input[type="checkbox"]:checked')
    , submitButton = self.find('.refinar-btn');

    // select only the relevant items
    $.each(checkedInput, function(i, item) {
      urlItems.push($(item).data("rel"));
    });

    if (checkedInput.length) {
      // create the url
      var url = document.location.protocol
      + "//"
      + document.location.host
      + "/"
      + self.data("dept")
      + "/?"
      + urlItems.join("&");

      // add new url as href of 'refine' button
      submitButton.removeClass("hide").attr("href", url);
    } else {
      submitButton.addClass("hide");
    }
    
    // Just to demonstrate
    submitButton.siblings('output').text(submitButton.attr('href'));
  }
  , changeUrl: function() {
    FilteredNav.wrapper.find('input[type="checkbox"]').on("change", FilteredNav.createUrl);
  }
};

// uncomment this line when testing on the console
// FilteredNav.init();

// comment this line when testing on the console
$(document).ready(function() {
  FilteredNav.init();
  
  // don't leave my Stack Snippet! :)
  $('a').on('click', function() { return false; });
});

a {
  text-decoration: none;
  color: inherit;
}

.refinar-btn {
  border: 1px solid black;
  display: inline-block;
  padding: 1ex;
}

.refinar-btn.hide {
  background: #eee;
  color: #777;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="dept-filters" data-dept="numbers">
    <div class="boxes">
      <label>
        <input type="checkbox" data-rel="filter1" />
        <span>Filter 1</span>
      </label>
      <label>
        <input type="checkbox" data-rel="filter2" />
        <span>Filter 2</span>
      </label>
      <label>
        <input type="checkbox" data-rel="filter3" />
        <span>Filter 3</span>
      </label>
    </div>
    <a class="refinar-btn">Refine</a>
    <output></output>
  </div>
  <div class="dept-filters" data-dept="letters">
    <div class="boxes">
      <label>
        <input type="checkbox" data-rel="filterA" />
        <span>Filter A</span>
      </label>
      <label>
        <input type="checkbox" data-rel="filterB" />
        <span>Filter B</span>
      </label>
      <label>
        <input type="checkbox" data-rel="filterC" />
        <span>Filter C</span>
      </label>
    </div>
    <a class="refinar-btn">Refine</a>
    <output></output>
  </div>
</div>