title: Change Select Dropdown to checkbox
body: <p>i have a select dropdown in my script, if you click on a entrie you add instant a filter to the site to sort the movies by genre. The script is as fallowing</p>
  
  <pre><code>&lt;select name="genres" class="form-control" data-bind="value: genre"&gt;
              &lt;option value=""&gt;{{ trans('dash.genres') }}&lt;/option&gt;
  
                  @foreach ($options-&gt;getGenres() as $genre)
                      &lt;option value="{{ strtolower($genre) }}"&gt;{{ $genre }}&lt;/option&gt;
                  @endforeach
          &lt;/select&gt;
  </code></pre>
  
  <p>Now i want to change the select dropdown to checkboxes, i achieved that with fallowing</p>
  
  <pre><code>&lt;ul&gt;
                      @foreach ($options-&gt;getGenres() as $genre)
                      &lt;li&gt;&lt;input type="checkbox"  name="genres"  data-bind="value: genre"  value="{{ strtolower($genre) }}"/&gt;{{ $genre }}&lt;/li&gt;
                      @endforeach
  &lt;/ul&gt;    
  </code></pre>
  
  <p>but if i click on a checkbox nothing happens, for now i want it how it be with the one page filter result. </p>
  
  <p>The select dropdown adds a filter with js instantly on the page, how can i do this with the checkboxes? Any ideas how to change or what?</p>
  
  <p><strong>Edit</strong></p>
  
  <p>This is the list where the Genre get in after click on select</p>
  
  <pre><code>&lt;ul id="selected-genres" data-bind="foreach: params.genres" class="list-unstyled list-inline"&gt;
              &lt;li data-bind="click: $root.removeGenre"&gt;&lt;i class="fa fa-times"&gt;&lt;/i&gt; &lt;span     data-bind="text: app.utils.ucFirst($data)"&gt;&lt;/span&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>This is the Js file for this function</p>
  
  <pre><code>(function($) {
  'use strict'
  
  app.viewModels.titles.index = {
  
      /**
       * Stores all the games in their original state.
       * 
       * @type Array
       */
      sourceItems: ko.observableArray(),
  
      /**
       * Latest genre user has selected.
       * 
       * @type string,
       */
      genre: ko.observableArray(),
  
  
      /**
       * Stores all parameters user is currently restricting titles query by.
       * 
       * @type {Object}
       */
      params: {
  
          /**
           * Currently selected sorting option.
           * 
           * @type ko.observable(String)
           */
          order: ko.observable('mc_num_of_votesDesc'),
  
          /**
           * Stores users query to filters games on.
           * 
           * @type ko.observable(String),
           */
          query: ko.observable().extend({ rateLimit: { method: "notifyWhenChangesStop", timeout: 400 } }),
  
          /**
           * Filter titles that were released after this date.
           * 
           * @type ko.observable(String),
           */
          after: ko.observable(),
  
          /**
           * Filter titles that were released before this date.
           * 
           * @type ko.observable(String),
           */
          before: ko.observable(),
  
          /**
           * Filter movies to only ones that specified actors appeared in.
           * 
           * @type string
           */
          cast: ko.observable(),
  
          /**
           * Filter titles by genres.
           * 
           * @type string,
           */
          genres: ko.observableArray(),
  
          type: ko.observable(),
  
          minRating: ko.observable(),
  
          maxRating: ko.observable(),
      },
  
      /**
       * Uri to hit for paginated results.
       * 
       * @type {String}
       */
      uri: 'titles',
  
      /**
       * Remove a genre from genres array.
       * 
       * @param  string genre
       * @return void
       */
      removeGenre: function(genre) {
          app.viewModels.titles.index.params.genres.remove(genre);
      },
  
      start: function(type) {
          var self   = this,
              genres = app.utils.getUrlParams('genre'),
              page   = window.location.hash,
              paginations = $('.index-pagination');
  
          self.params.type(type);
  
          //filter by genres if they're present in url params
          if (genres) {
              $.each(genres.replace(/ /g,'').split(','), function(i,v) {
                  self.params.genres.push(v);
              });
          }
  
          //push a genre user selects to genres array
          self.genre.subscribe(function(value) {
  
              if (value) {
                  self.params.genres.push(value);
              }
  
          });
  
          //set a page if we found any in url hash
          if (page) {
              app.paginator.currentPage(page.replace('#page-', ''));
          }
  
          //change current page on url hash change
          $(window).bind('hashchange', function(e, b, c) {
              var hash = location.hash.slice(1);
  
              if (hash.indexOf('page-') &gt; -1) {
                  app.paginator.currentPage(hash.replace('page-', ''));
              }       
          });
  
          app.paginator.start(app.viewModels.titles.index, '#content', 18).success(function(data) {
              paginations.pagination({
                  items: app.paginator.totalItems(),
                  itemsOnPage: app.paginator.perPage(),
                  displayedPages: 8,
                  selectOnClick: false,
              });
          });
  
          app.paginator.paginate.subscribe(function(promise) {
  
              promise.success(function(data) {
                  paginations.pagination('updateItems', app.paginator.totalItems());
                  paginations.pagination('updateItemsOnPage', app.paginator.perPage());
              });
  
          });
  
          //scroll top when botom pagination is used
          $('.bottom-pagination').on('click', function(e) {
              if ( ! $(e.target).parent().is('.active')) {
                  var body = $('html, body');
                  body.animate({scrollTop:0});
              }
          });
      },
  };
  
  })(jQuery);
  </code></pre>
  
  <p>And its working with Knockout.js i dont include the minified code</p>
  
  <p>Thank you for helping me</p>