title: knockout js checkbox filter working with ko.utils.arrayFilter
body: <p>I have taken this example</p>
  
  <p><a href="http://knockoutjs.com/examples/animatedTransitions.html" rel="nofollow">http://knockoutjs.com/examples/animatedTransitions.html</a></p>
  
  <p>and replaced the radio inputs with checkboxes i have it working if i return the planet.type manualy but i need to return more than 1 planet.type
  example 1 <a href="http://www.html5imageeditor.co.uk/kopush/filter.php" rel="nofollow">http://www.html5imageeditor.co.uk/kopush/filter.php</a>
  example 2 <a href="http://www.html5imageeditor.co.uk/kopush/filter2.php" rel="nofollow">http://www.html5imageeditor.co.uk/kopush/filter2.php</a></p>
  
  <p>View</p>
  
  <pre><code>       &lt;label&gt;&lt;input type='checkbox' name="type" data-bind='value: "all" ,checked: typeToShow' /&gt;All&lt;/label&gt;
         &lt;label&gt;&lt;input type='checkbox' name="type" data-bind='value: "rock" ,checked: typeToShow' /&gt;Rock&lt;/label&gt;
         &lt;label&gt;&lt;input type='checkbox' name="type" data-bind='value: "gasgiant" ,checked: typeToShow' /&gt;Gas Giant&lt;/label&gt;
     &lt;div data-bind='template: { foreach: planetsToShow,
                                 beforeRemove: hidePlanetElement,
                                 afterAdd: showPlanetElement }'&gt;
         &lt;div data-bind='attr: { "class": "planet " }'&gt;&lt;span data-bind="text: name "&gt;&lt;/span&gt;&lt;/div&gt;
     &lt;/div&gt;
  </code></pre>
  
  <p>model</p>
  
  <pre><code>var PlanetsModel = function() {
     this.planets = ko.observableArray([
          { name: "Mercury", type: "rock"},
          { name: "Venus", type: "rock"},
          { name: "Earth", type: "rock"},
          { name: "Mars", type: "rock"},
          { name: "Jupiter", type: "gasgiant"},
          { name: "Saturn", type: "gasgiant"},
          { name: "Uranus", type: "gasgiant"},
          { name: "Neptune", type: "gasgiant"},
          { name: "Pluto", type: "rock"}
      ]);
  
     this.typeToShow = ko.observableArray(["all"]);
  
     this.planetsToShow = ko.computed(function() {
  
         var desiredType = this.typeToShow();
         if (desiredType == "all") return this.planets();
         return ko.utils.arrayFilter(this.planets(), function(planet) {
  
          return planet.type == 'rock' || planet.type == 'gasgiant';//shows all how can i oproduce this result dynamicly ?
         //return planet.type == 'rock' shows just the rock
         });
     }, this);
  
  
     this.showPlanetElement = function(elem) { if (elem.nodeType === 1) $(elem).hide().slideDown() }
     this.hidePlanetElement = function(elem) { if (elem.nodeType === 1) $(elem).slideUp(function() { $(elem).remove(); }) }
  };
  
  
  ko.bindingHandlers.fadeVisible = {
     init: function(element, valueAccessor) {
  
         var value = valueAccessor();
         $(element).toggle(ko.utils.unwrapObservable(value));
     },
     update: function(element, valueAccessor) {
  
         var value = valueAccessor();
         ko.utils.unwrapObservable(value) ? $(element).fadeIn() : $(element).fadeOut();
     }
  };
  
  ko.applyBindings(new PlanetsModel());
  </code></pre>
  
  <p>as you can see the return is set manually i need create it dynamicly like planet.type == 'rock' || planet.type == 'gasgiant'  hope it makes sence</p>
  
  <p>thank you</p>