多个复选框过滤，JavaScript和jQuery

时间：2016-04-21 07:50:24

标签： javascript jquery html css

请看一下这个JSFiddle example，我不知道为什么它不起作用。我坚持了几个小时，感觉好像在地板上敲打笔记本电脑。 附：我是JavaScript和jQuery的新手。

var $results = $('.result'),
  $checks = $(':checkbox[name^=fl]');

$checks.change(function() {
  var $checked = $checks.filter(':checked');
  /* show all when nothing checked*/
  if (!$checked.length) {
    $results.show();
    return; /* quit here if nothing checked */
  }
  /* create array of checked values */
  var checkedVals = $.map($checked, function(el) {
    return el.value
  });
  /* hide all results, then filter for matches */
  $results.hide().filter(function() {
    /* split categories for this result into an array*/
    var cats = $(this).data('category').split(' ');
    /* filter the checkedVals array to only values that match */
    var checkMatches = $.grep(checkedVals, function(val) {
      return $.inArray(val, cats) > -1;
    });
    /* only return elements with matched array and original array being same length */
    return checkMatches.length === checkedVals.length;
    /* show results that match all the checked checkboxes */
  }).show();
  /* do something when there aren't any matches */
  if (!$results.length) {
    alert('Ooops...no matches');
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div>
  <form style="text-align: center;">
    Make:
    <label>
      <input type="checkbox" name="f1-1" value="honda" id="honda" />Honda</label>&nbsp;&nbsp;
    <label>
      <input type="checkbox" name="f1-1" value="marutisuzuki" id="marutisuzuki" />Maruti Suzuki</label>&nbsp;&nbsp;
    <label>
      <input type="checkbox" name="f1-1" value="volkswagen" id="volkswagen" />Volkswagen</label>&nbsp;&nbsp;
    <label>
      <input type="checkbox" name="f1-1" value="hyundai" id="hyundai" />Hyundai</label>&nbsp;&nbsp;
    <label>
      <input type="checkbox" name="f1-1" value="audi" id="audi" />Audi</label>&nbsp;&nbsp;
    <label>
      <input type="checkbox" name="f1-1" value="bmw" id="bmw" />BMW</label>&nbsp;&nbsp;
    <label>
      <input type="checkbox" name="f1-1" value="skoda" id="skoda" />Skoda</label>&nbsp;&nbsp;
    <label>
      <input type="checkbox" name="f1-1" value="ford" id="ford" />Ford</label>&nbsp;&nbsp;
  </form>
  <br />

  <form style="text-align: center;">
    Year:
    <label>
      <input type="checkbox" name="f1-2" value="2002" id="2002" />2002</label>&nbsp;&nbsp;
    <label>
      <input type="checkbox" name="f1-2" value="2005" id="2005" />2005</label>&nbsp;&nbsp;
    <label>
      <input type="checkbox" name="f1-2" value="2006" id="2006" />2006</label>&nbsp;&nbsp;
    <label>
      <input type="checkbox" name="f1-2" value="2008" id="2008" />2008</label>&nbsp;&nbsp;
    <label>
      <input type="checkbox" name="f1-2" value="2009" id="2009" />2009</label>&nbsp;&nbsp;
    <label>
      <input type="checkbox" name="f1-2" value="2010" id="2010" />2010</label>&nbsp;&nbsp;
    <label>
      <input type="checkbox" name="f1-2" value="2011" id="2011" />2011</label>&nbsp;&nbsp;
    <label>
      <input type="checkbox" name="f1-2" value="2012" id="2012" />2012</label>&nbsp;&nbsp;
    <label>
      <input type="checkbox" name="f1-2" value="2013" id="2013" />2013</label>&nbsp;&nbsp;
    <label>
      <input type="checkbox" name="f1-2" value="2014" id="2014" />2014</label>&nbsp;&nbsp;
    <label>
      <input type="checkbox" name="f1-2" value="2015" id="2015" />2015</label>&nbsp;&nbsp;
    <label>
      <input type="checkbox" name="f1-2" value="2016" />2016</label>&nbsp;&nbsp;
  </form>
</div>
<br />

<div class="results">
  <div class="result" data-id="marutiswift" data-category="marutisuzuki 2008">
    <img src="images/marutiswift_black.jpg" alt="Maruti Swift" width="265 px" height="200 px" style="margin-left: auto; margin-right: auto; display: block;">
    <br />
    <p>Make: Maruti Suzuki</p>
    <p>Model: Swift</p>
    <p>Year: 2008</p>
    <p>Price: 1,50,000</p>
  </div>

  <div class="result" data-id="audia4" data-category="audi 2010">
    <img src="images/audia4_white.jpg" alt="Audi A4" width="265 px" height="200 px" style="margin-left: auto; margin-right: auto; display: block;">
    <br />
    <p>Make: Audi</p>
    <p>Model: A4</p>
    <p>Year: 2010</p>
    <p>Price: 1,50,000</p>
  </div>

  <div class="result" data-id="hondacity" data-category="honda 2005">
    <img src="images/hondacity_blue.jpg" alt="Honda City" width="265 px" height="200 px" style="margin-left: auto; margin-right: auto; display: block;">
    <br />
    <p>Make: Honda</p>
    <p>Model: City</p>
    <p>Year: 2005</p>
    <p>Price: 1,50,000</p>
  </div>

  <div class="result" data-id="bmwz4" data-category="bmw 2012">
    <img src="images/bmwz4_blue.jpg" alt="BMW Z4" width="265 px" height="200 px" style="margin-left: auto; margin-right: auto; display: block;">
    <br />
    <p>Make: BMW</p>
    <p>Model: Z4</p>
    <p>Year: 2012</p>
    <p>Price: 1,50,000</p>
  </div>
  <br />
  <br />

  <div class="result" data-id="volkswagenvento" data-category="volkswagen 2015">
    <img src="images/volkswagenvento_red.jpg" alt="Volkswagen Vento" width="265 px" height="200 px" style="margin-left: auto; margin-right: auto; display: block;">
    <br />
    <p>Make: Volkswagen</p>
    <p>Model: Vento</p>
    <p>Year: 2015</p>
    <p>Price: 1,50,000</p>
  </div>

  <div class="result" data-id="hondaamaze" data-category="honda 2011">
    <img src="images/hondaamaze_maroon.png" alt="Honda Amaze" width="265 px" height="200 px" style="margin-left: auto; margin-right: auto; display: block;">
    <br />
    <p>Make: Honda</p>
    <p>Model: Amaze</p>
    <p>Year: 2011</p>
    <p>Price: 1,50,000</p>
  </div>

  <div class="result" ddata-id="bmw720d" data-category="bmw 2009">
    <img src="images/bmw720d_grey.jpg" alt="BMW 720d" width="265 px" height="200 px" style="margin-left: auto; margin-right: auto; display: block;">
    <br />
    <p>Make: BMW</p>
    <p>Model: 720d</p>
    <p>Year: 2009</p>
    <p>Price: 1,50,000</p>
  </div>

  <div class="result" data-id="maruti800" data-category="marutisuzuki 2009">
    <img src="images/maruti800_blue.jpg" alt="Maruti Suzuki 800" width="265 px" height="200 px" style="margin-left: auto; margin-right: auto; display: block;">
    <br />
    <p>Make: Maruti Suzuki</p>
    <p>Model: 800</p>
    <p>Year: 2009</p>
    <p>Price: 1,50,000</p>
  </div>
  <br />
  <br />

  <div class="result" data-id="audia6" data-category="audi 2016">
    <img src="images/audia6_white.jpg" alt="Audi A6" width="265 px" height="200 px" style="margin-left: auto; margin-right: auto; display: block;">
    <br />
    <p>Make: Audi</p>
    <p>Model: A6</p>
    <p>Year: 2016</p>
    <p>Price: 1,50,000</p>
  </div>

  <div class="result" data-id="hondacivic" data-category="honda 2010">
    <img src="images/hondacivic_white.jpg" alt="Honda Civic" width="265 px" height="200 px" style="margin-left: auto; margin-right: auto; display: block;">
    <br />
    <p>Make: Honda</p>
    <p>Model: Civic</p>
    <p>Year: 2010</p>
    <p>Price: 1,50,000</p>
  </div>

  <div class="result" data-id="fordfigo" data-category="ford 2015">
    <img src="images/fordfigo_red.jpg" alt="Ford Figo" width="265 px" height="200 px" style="margin-left: auto; margin-right: auto; display: block;">
    <br />
    <p>Make: Ford</p>
    <p>Model: Figo</p>
    <p>Year: 2015</p>
    <p>Price: 1,50,000</p>
  </div>

  <div class="result" data-id="hyundaieon" data-category="hyundai 2013">
    <img src="images/hyundaieon_blue.jpg" alt="Hyundai Eon" width="265 px" height="200 px" style="margin-left: auto; margin-right: auto; display: block;">
    <br />
    <p>Make: Hyundai</p>
    <p>Model: Eon</p>
    <p>Year: 2013</p>
    <p>Price: 1,50,000</p>
  </div>
  <br />
  <br />

  <div class="result" data-id="hyundaiverna" data-category="hyundai 2006">
    <img src="images/hyundaiverna_red.jpg" alt="Hyundai Verna" width="265 px" height="200 px" style="margin-left: auto; margin-right: auto; display: block;">
    <br />
    <p>Make: Hyundai</p>
    <p>Model: Verna</p>
    <p>Year: 2006</p>
    <p>Price: 1,50,000</p>
  </div>

  <div class="result" data-id="fordfiesta" data-category="ford 2002">
    <img src="images/fordfiesta_white.jpg" alt="Ford Fiesta" width="265 px" height="200 px" style="margin-left: auto; margin-right: auto; display: block;">
    <br />
    <p>Make: Ford</p>
    <p>Model: Fiesta</p>
    <p>Year: 2002</p>
    <p>Price: 1,50,000</p>
  </div>

  <div class="result" data-id="skodarapid" data-category="skoda 2014">
    <img src="images/skodarapid_white.jpg" alt="Skoda Rapid" width="265 px" height="200 px" style="margin-left: auto; margin-right: auto; display: block;">
    <br />
    <p>Make: Skoda</p>
    <p>Model: Rapid</p>
    <p>Year: 2014</p>
    <p>Price: 1,50,000</p>
  </div>

  <div class="result" data-id="bmw320d" data-category="bmw 2015">
    <img src="images/bmw320d_white.jpg" alt="BMW 320d" width="265 px" height="200 px" style="margin-left: auto; margin-right: auto; display: block;">
    <br />
    <p>Make: BMW</p>
    <p>Model: 320d</p>
    <p>Year: 2015</p>
    <p>Price: 1,50,000</p>
  </div>
  <br />
  <br />

  <div class="result" data-id="audir8" data-category="audi 2016">
    <img src="images/audir8_blue.jpg" alt="Audi R8" width="265 px" height="200 px" style="margin-left: auto; margin-right: auto; display: block;">
    <br />
    <p>Make: Audi</p>
    <p>Model: R8</p>
    <p>Year: 2016</p>
    <p>Price: 1,50,000</p>
  </div>

  <div class="result" data-id="hondabrio" data-category="honda 2013">
    <img src="images/hondabrio_blue.jpg" alt="Honda Brio" width="265 px" height="200 px" style="margin-left: auto; margin-right: auto; display: block;">
    <br />
    <p>Make: Honda</p>
    <p>Model: Brio</p>
    <p>Year: 2013</p>
    <p>Price: 1,50,000</p>
  </div>

  <div class="result" data-id="skodafabia" data-category="skoda 2012">
    <img src="images/skodafabia_red.jpg" alt="Skoda Fabia" width="265 px" height="200 px" style="margin-left: auto; margin-right: auto; display: block;">
    <br />
    <p>Make: Skoda</p>
    <p>Model: Fabia</p>
    <p>Year: 2012</p>
    <p>Price: 1,50,000</p>
  </div>

  <div class="result" data-id="volkswagenpolo" data-category="volkswagen 2014">
    <img src="images/volkswagenpolo_white.jpg" alt="Volkswagen Polo" width="265 px" height="200 px" style="margin-left: auto; margin-right: auto; display: block;">
    <br />
    <p>Make: Volkswagen</p>
    <p>Model: Polo</p>
    <p>Year: 2014</p>
    <p>Price: 1,50,000</p>
  </div>
</div>

2 个答案:

答案 0 :(得分：0)

你的选择器错了。

$checks = $(':checkbox[name^=fl]');

应该是

$checks = $(':checkbox[name^=f1]');

Updated fiddle

答案 1 :(得分：0)

尝试将过滤器逻辑更改为

＆＃13;
＆＃13; 
var $results = $('.result'),
  $checks = $(':checkbox[name^="f1"]');
$checks.change(function() {
  var $checked = $checks.filter(':checked');
  /* show all when nothing checked*/
  if (!$checked.length) {
    $results.show();
    return; /* quit here if nothing checked */
  }

  var filters = $('form').map(function() {
    var $checked = $(this).find('input:checkbox[name^="f1"]:checked');
    return $checked.length ? [$checked.map(function() {
      return this.value
    }).get()] : undefined;
  }).get().filter(Boolean);


  var $filtered = $results.hide();
  filters.forEach(function(values) {
    $filtered = $filtered.filter(function() {
      return $(this).data('category').split(' ').some(function(cat) {
        return values.indexOf(cat) > -1;
      });
    });
  });
  $filtered.show();

  /* do something when there aren't any matches */
  if (!$results.length) {
    alert('Ooops...no matches');
  }
});
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <form style="text-align: center;">
    Make:
    <label>
      <input type="checkbox" name="f1-1" value="honda" id="honda" />Honda</label>&nbsp;&nbsp;
    <label>
      <input type="checkbox" name="f1-1" value="marutisuzuki" id="marutisuzuki" />Maruti Suzuki</label>&nbsp;&nbsp;
    <label>
      <input type="checkbox" name="f1-1" value="volkswagen" id="volkswagen" />Volkswagen</label>&nbsp;&nbsp;
    <label>
      <input type="checkbox" name="f1-1" value="hyundai" id="hyundai" />Hyundai</label>&nbsp;&nbsp;
    <label>
      <input type="checkbox" name="f1-1" value="audi" id="audi" />Audi</label>&nbsp;&nbsp;
    <label>
      <input type="checkbox" name="f1-1" value="bmw" id="bmw" />BMW</label>&nbsp;&nbsp;
    <label>
      <input type="checkbox" name="f1-1" value="skoda" id="skoda" />Skoda</label>&nbsp;&nbsp;
    <label>
      <input type="checkbox" name="f1-1" value="ford" id="ford" />Ford</label>&nbsp;&nbsp;
  </form>
  <br />

  <form style="text-align: center;">
    Year:
    <label>
      <input type="checkbox" name="f1-2" value="2002" id="2002" />2002</label>&nbsp;&nbsp;
    <label>
      <input type="checkbox" name="f1-2" value="2005" id="2005" />2005</label>&nbsp;&nbsp;
    <label>
      <input type="checkbox" name="f1-2" value="2006" id="2006" />2006</label>&nbsp;&nbsp;
    <label>
      <input type="checkbox" name="f1-2" value="2008" id="2008" />2008</label>&nbsp;&nbsp;
    <label>
      <input type="checkbox" name="f1-2" value="2009" id="2009" />2009</label>&nbsp;&nbsp;
    <label>
      <input type="checkbox" name="f1-2" value="2010" id="2010" />2010</label>&nbsp;&nbsp;
    <label>
      <input type="checkbox" name="f1-2" value="2011" id="2011" />2011</label>&nbsp;&nbsp;
    <label>
      <input type="checkbox" name="f1-2" value="2012" id="2012" />2012</label>&nbsp;&nbsp;
    <label>
      <input type="checkbox" name="f1-2" value="2013" id="2013" />2013</label>&nbsp;&nbsp;
    <label>
      <input type="checkbox" name="f1-2" value="2014" id="2014" />2014</label>&nbsp;&nbsp;
    <label>
      <input type="checkbox" name="f1-2" value="2015" id="2015" />2015</label>&nbsp;&nbsp;
    <label>
      <input type="checkbox" name="f1-2" value="2016" />2016</label>&nbsp;&nbsp;
  </form>
</div>
<br />

<div class="results">
  <div class="result" data-id="marutiswift" data-category="marutisuzuki 2008">
    <img src="images/marutiswift_black.jpg" alt="Maruti Swift" width="265 px" height="200 px" style="margin-left: auto; margin-right: auto; display: block;">
    <br />
    <p>Make: Maruti Suzuki</p>
    <p>Model: Swift</p>
    <p>Year: 2008</p>
    <p>Price: 1,50,000</p>
  </div>

  <div class="result" data-id="audia4" data-category="audi 2010">
    <img src="images/audia4_white.jpg" alt="Audi A4" width="265 px" height="200 px" style="margin-left: auto; margin-right: auto; display: block;">
    <br />
    <p>Make: Audi</p>
    <p>Model: A4</p>
    <p>Year: 2010</p>
    <p>Price: 1,50,000</p>
  </div>

  <div class="result" data-id="hondacity" data-category="honda 2005">
    <img src="images/hondacity_blue.jpg" alt="Honda City" width="265 px" height="200 px" style="margin-left: auto; margin-right: auto; display: block;">
    <br />
    <p>Make: Honda</p>
    <p>Model: City</p>
    <p>Year: 2005</p>
    <p>Price: 1,50,000</p>
  </div>

  <div class="result" data-id="bmwz4" data-category="bmw 2012">
    <img src="images/bmwz4_blue.jpg" alt="BMW Z4" width="265 px" height="200 px" style="margin-left: auto; margin-right: auto; display: block;">
    <br />
    <p>Make: BMW</p>
    <p>Model: Z4</p>
    <p>Year: 2012</p>
    <p>Price: 1,50,000</p>
  </div>
  <br />
  <br />

  <div class="result" data-id="volkswagenvento" data-category="volkswagen 2015">
    <img src="images/volkswagenvento_red.jpg" alt="Volkswagen Vento" width="265 px" height="200 px" style="margin-left: auto; margin-right: auto; display: block;">
    <br />
    <p>Make: Volkswagen</p>
    <p>Model: Vento</p>
    <p>Year: 2015</p>
    <p>Price: 1,50,000</p>
  </div>

  <div class="result" data-id="hondaamaze" data-category="honda 2011">
    <img src="images/hondaamaze_maroon.png" alt="Honda Amaze" width="265 px" height="200 px" style="margin-left: auto; margin-right: auto; display: block;">
    <br />
    <p>Make: Honda</p>
    <p>Model: Amaze</p>
    <p>Year: 2011</p>
    <p>Price: 1,50,000</p>
  </div>

  <div class="result" ddata-id="bmw720d" data-category="bmw 2009">
    <img src="images/bmw720d_grey.jpg" alt="BMW 720d" width="265 px" height="200 px" style="margin-left: auto; margin-right: auto; display: block;">
    <br />
    <p>Make: BMW</p>
    <p>Model: 720d</p>
    <p>Year: 2009</p>
    <p>Price: 1,50,000</p>
  </div>

  <div class="result" data-id="maruti800" data-category="marutisuzuki 2009">
    <img src="images/maruti800_blue.jpg" alt="Maruti Suzuki 800" width="265 px" height="200 px" style="margin-left: auto; margin-right: auto; display: block;">
    <br />
    <p>Make: Maruti Suzuki</p>
    <p>Model: 800</p>
    <p>Year: 2009</p>
    <p>Price: 1,50,000</p>
  </div>
  <br />
  <br />

  <div class="result" data-id="audia6" data-category="audi 2016">
    <img src="images/audia6_white.jpg" alt="Audi A6" width="265 px" height="200 px" style="margin-left: auto; margin-right: auto; display: block;">
    <br />
    <p>Make: Audi</p>
    <p>Model: A6</p>
    <p>Year: 2016</p>
    <p>Price: 1,50,000</p>
  </div>

  <div class="result" data-id="hondacivic" data-category="honda 2010">
    <img src="images/hondacivic_white.jpg" alt="Honda Civic" width="265 px" height="200 px" style="margin-left: auto; margin-right: auto; display: block;">
    <br />
    <p>Make: Honda</p>
    <p>Model: Civic</p>
    <p>Year: 2010</p>
    <p>Price: 1,50,000</p>
  </div>

  <div class="result" data-id="fordfigo" data-category="ford 2015">
    <img src="images/fordfigo_red.jpg" alt="Ford Figo" width="265 px" height="200 px" style="margin-left: auto; margin-right: auto; display: block;">
    <br />
    <p>Make: Ford</p>
    <p>Model: Figo</p>
    <p>Year: 2015</p>
    <p>Price: 1,50,000</p>
  </div>

  <div class="result" data-id="hyundaieon" data-category="hyundai 2013">
    <img src="images/hyundaieon_blue.jpg" alt="Hyundai Eon" width="265 px" height="200 px" style="margin-left: auto; margin-right: auto; display: block;">
    <br />
    <p>Make: Hyundai</p>
    <p>Model: Eon</p>
    <p>Year: 2013</p>
    <p>Price: 1,50,000</p>
  </div>
  <br />
  <br />

  <div class="result" data-id="hyundaiverna" data-category="hyundai 2006">
    <img src="images/hyundaiverna_red.jpg" alt="Hyundai Verna" width="265 px" height="200 px" style="margin-left: auto; margin-right: auto; display: block;">
    <br />
    <p>Make: Hyundai</p>
    <p>Model: Verna</p>
    <p>Year: 2006</p>
    <p>Price: 1,50,000</p>
  </div>

  <div class="result" data-id="fordfiesta" data-category="ford 2002">
    <img src="images/fordfiesta_white.jpg" alt="Ford Fiesta" width="265 px" height="200 px" style="margin-left: auto; margin-right: auto; display: block;">
    <br />
    <p>Make: Ford</p>
    <p>Model: Fiesta</p>
    <p>Year: 2002</p>
    <p>Price: 1,50,000</p>
  </div>

  <div class="result" data-id="skodarapid" data-category="skoda 2014">
    <img src="images/skodarapid_white.jpg" alt="Skoda Rapid" width="265 px" height="200 px" style="margin-left: auto; margin-right: auto; display: block;">
    <br />
    <p>Make: Skoda</p>
    <p>Model: Rapid</p>
    <p>Year: 2014</p>
    <p>Price: 1,50,000</p>
  </div>

  <div class="result" data-id="bmw320d" data-category="bmw 2015">
    <img src="images/bmw320d_white.jpg" alt="BMW 320d" width="265 px" height="200 px" style="margin-left: auto; margin-right: auto; display: block;">
    <br />
    <p>Make: BMW</p>
    <p>Model: 320d</p>
    <p>Year: 2015</p>
    <p>Price: 1,50,000</p>
  </div>
  <br />
  <br />

  <div class="result" data-id="audir8" data-category="audi 2016">
    <img src="images/audir8_blue.jpg" alt="Audi R8" width="265 px" height="200 px" style="margin-left: auto; margin-right: auto; display: block;">
    <br />
    <p>Make: Audi</p>
    <p>Model: R8</p>
    <p>Year: 2016</p>
    <p>Price: 1,50,000</p>
  </div>

  <div class="result" data-id="hondabrio" data-category="honda 2013">
    <img src="images/hondabrio_blue.jpg" alt="Honda Brio" width="265 px" height="200 px" style="margin-left: auto; margin-right: auto; display: block;">
    <br />
    <p>Make: Honda</p>
    <p>Model: Brio</p>
    <p>Year: 2013</p>
    <p>Price: 1,50,000</p>
  </div>

  <div class="result" data-id="skodafabia" data-category="skoda 2012">
    <img src="images/skodafabia_red.jpg" alt="Skoda Fabia" width="265 px" height="200 px" style="margin-left: auto; margin-right: auto; display: block;">
    <br />
    <p>Make: Skoda</p>
    <p>Model: Fabia</p>
    <p>Year: 2012</p>
    <p>Price: 1,50,000</p>
  </div>

  <div class="result" data-id="volkswagenpolo" data-category="volkswagen 2014">
    <img src="images/volkswagenpolo_white.jpg" alt="Volkswagen Polo" width="265 px" height="200 px" style="margin-left: auto; margin-right: auto; display: block;">
    <br />
    <p>Make: Volkswagen</p>
    <p>Model: Polo</p>
    <p>Year: 2014</p>
    <p>Price: 1,50,000</p>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题