使用多个Checkbox进行Jquery过滤

Question

对于当前项目，我正在创建一个简单的产品目录，应该可以通过Jquery使用几组复选框进行过滤。

在选中两个或更多复选框的单个集合中，逻辑应为OR，而当使用两个或更多复选框时，它应为AND。

我目前使用的一个好的（和工作）示例可以在这里找到：

https://stackoverflow.com/a/22941156/5567735

的jsfiddle

if (cselector === '' && nselector === '') {
    $('.flowers > div').filter(selector).show();
} else if (cselector === '') {
    $('.flowers > div').filter(selector).filter(nselector).show();
} else if (nselector === '') {
    $('.flowers > div').filter(selector).filter(cselector).show();
} else {
    $('.flowers > div').filter(selector).filter(cselector).filter(nselector).show();
}

我的问题是在选择过滤器时使用过滤器的代码的这一部分。 现在，这对于示例中使用的3个过滤器非常有用。 我想知道有没有更好的方法来做这件事？ 在我的情况下，我想添加一些更多的过滤器，然后当我必须添加更多if语句时，这部分代码将很快变得混乱。

所以基本上我的问题是：使用这个设置，你将如何添加更多的过滤器，这样你最终有6或7而不是当前的3？

非常感谢，彼得

PS我也很欣赏完全不同的方法提示，但由于我已经花了很长时间，我真的很想让它以这种方式工作。

Answer 1

您当前的方法不是非常动态，选择器和数组是硬编码的，因此每次添加新的过滤器选项时，您都必须添加代码来处理它。

相反，只需将更改处理程序绑定到所有筛选器复选框，您就可以收集它们的值，并按它们各自的名称对它们进行分组，例如：

var $filterCheckboxes = $( '.filter-checkboxes' );

$filterCheckboxes.on( 'change', function() {

  var selectedFilters = {};

  $filterCheckboxes.filter( ':checked' ).each( function() {

    if ( ! selectedFilters.hasOwnProperty( this.name ) ) {
      selectedFilters[ this.name ] = [];
    }

    selectedFilters[ this.name ].push( this.value );

  } );

} );

这将创建一个包含input-name -> value array对的对象，例如：

selectedFilters = {
  'fl-colour': [ 'red', 'green' ],
  'fl-size': [ 'tiny' ]
};

然后，您可以遍历每个selectedFilters ，并过滤.flower元素。 如果.flower元素与每个命名集合中的值匹配，则返回true，以便该元素包含在$filteredResults集合中：

// create a collection containing all of the filterable elements
var $filteredResults = $( '.flower' );

// loop over the selected filter name -> (array) values pairs
$.each( selectedFilters, function( name, filterValues ) {

  // filter each .flower element
  $filteredResults = $filteredResults.filter( function() {

    var matched = false,
        currentFilterValues = $( this ).data( 'category' ).split( ' ' );

    // loop over each category value in the current .flower's data-category
    $.each( currentFilterValues, function( _, currentFilterValue ) {

      // if the current category exists in the selected filters array
      // set matched to true, and stop looping. as we're ORing in each
      // set of filters, we only need to match once

      if ( $.inArray( currentFilterValue, filterValues) != -1 ) {
        matched = true;
        return false;
      }

    } );    

    // if matched is true the current .flower element is returned
    return matched;    

  } );

} );

然后只需隐藏所有.flower元素，并显示$filteredResults ，例如：

$( '.flower' ).hide().filter( $filteredResults ).show();

这是一个小例子

Answer 2

这是来自billyonecan的jsfiddle的一个分支。 差异是......

• 未选中的框表示该属性已从结果中排除
• 默认情况下会选中所有复选框（显示所有结果）
• 必须至少检查每个筛选器组的一个复选框
• 如果过滤器组未提交过滤器，则会隐藏所有结果

• 如果添加了新的过滤器组，则会自动处理

  （（a || b || c）&&（x || y || z）&&（1 || 2 || 3）...）

。 的jsfiddle

 var $filterCheckboxes = $('input[type="checkbox"]'); // Read All Available Filter Groups var allFilters = []; $filterCheckboxes.each(function() { if ($.inArray(this.name,allFilters) == -1){ allFilters.push(this.name); } }); // console.log(allFilters); $filterCheckboxes.on('change', function() { // create a collection containing all of the filterable elements var $filteredResults = $('.item'); var $filterCategoryApplied = 0; $.each(allFilters, function(arIndex, filterName) { // console.log(filterName); var $filterCheckboxCategory = $('input[name='+filterName+']').filter(':checked'); console.log(filterName + ' length = ' + $filterCheckboxCategory.length); if ( $filterCheckboxCategory.length === 0 ) { // alert('none checked for ' + filterName); $filteredResults = []; } }); console.log('start checking'); // Read Selectetd Filters var selectedFilters = {}; $filterCheckboxes.filter(':checked').each(function() { if (!selectedFilters.hasOwnProperty(this.name)) { selectedFilters[this.name] = []; } selectedFilters[this.name].push(this.value); }); // loop over the selected filter name -> (array) values pairs $.each(selectedFilters, function(name, filterValues) { //console.log(selectedFilters['fl-colour'].length); //console.log(name); //console.log(filterValues); //console.log(filterValues.length); // filter each .flower element $filteredResults = $filteredResults.filter(function() { var matched = false, currentFilterValues = $(this).data('category').split(' '); // loop over each category value in the current .flower's data-category $.each(currentFilterValues, function(_, currentFilterValue) { // if the current category exists in the selected filters array // set matched to true, and stop looping. as we're ORing in each // set of filters, we only need to match once if ($.inArray(currentFilterValue, filterValues) != -1) { matched = true; return false; } }); // if matched is true the current .flower element is returned return matched; }); }); $('.item').hide().filter($filteredResults).show(); }); 

 body { font-family: 'Arial'; color: #646464; } .items-wrap { float: left; width: 20%; margin: 0 3% 0 0; padding: 0; position: relative; } .items { float: left; width: 60%; } .items div.item { float: left; width: 45%; height: 28px; line-height: 38px; padding: 0 1%; background: #eee; margin: 0 0 1px; position: relative; font-size: 0.7em; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <pre id=result> </pre> <div class="items-wrap"> <h3 style="font-size:13px; font-weight:normal;">Filter Items</h3> <p style="font-size:12px;"><strong>By colour:</strong></p> <form id='filters'> <label style="font-size:12px;"> <input type="checkbox" name="fl-colour" value="red" id="red" checked /> Red</label> <br> <label style="font-size:12px;"> <input type="checkbox" name="fl-colour" value="yellow" id="yellow" checked /> Yellow</label> <br> <label style="font-size:12px;"> <input type="checkbox" name="fl-colour" value="green" id="green" checked /> Green</label> <p style="font-size:12px;"><strong>By size:</strong></p> <label style="font-size:12px;"> <input type="checkbox" name="fl-size" value="small" id="small" checked /> Small</label> <br> <label style="font-size:12px;"> <input type="checkbox" name="fl-size" value="medium" id="medium" checked /> Medium</label> <br> <label style="font-size:12px;"> <input type="checkbox" name="fl-size" value="large" id="large" checked /> Large</label> <p style="font-size:12px;"><strong>By Shape:</strong></p> <label style="font-size:12px;"> <input type="checkbox" name="fl-shape" value="square" id="square" checked /> Square</label> <br> <label style="font-size:12px;"> <input type="checkbox" name="fl-shape" value="circle" id="circle" checked /> Circle</label> <br> <label style="font-size:12px;"> <input type="checkbox" name="fl-shape" value="triangle" id="triangle" checked /> Triangle</label> </form> </div> <div class="items"> <div class="item" data-id="rss" data-category="red small square">red small square</div> <div class="item" data-id="yss" data-category="yellow small square">yellow small square</div> <div class="item" data-id="gss" data-category="green small square">green small square</div> <div class="item" data-id="rms" data-category="red medium square">red medium square</div> <div class="item" data-id="yms" data-category="yellow medium square">yellow medium square</div> <div class="item" data-id="gms" data-category="green medium square">green medium square</div> <div class="item" data-id="rls" data-category="red large square">red large square</div> <div class="item" data-id="yls" data-category="yellow large square">yellow large square</div> <div class="item" data-id="gls" data-category="green large square">green large square</div> <div class="item" data-id="rsc" data-category="red small circle">red small circle</div> <div class="item" data-id="ysc" data-category="yellow small circle">yellow small circle</div> <div class="item" data-id="gsc" data-category="green small circle">green small circle</div> <div class="item" data-id="rmc" data-category="red medium circle">red medium circle</div> <div class="item" data-id="ymc" data-category="yellow medium circle">yellow medium circle</div> <div class="item" data-id="gmc" data-category="green medium circle">green medium circle</div> <div class="item" data-id="rlc" data-category="red large circle">red large circle</div> <div class="item" data-id="ylc" data-category="yellow large circle">yellow large circle</div> <div class="item" data-id="glc" data-category="green large circle">green large circle</div> <div class="item" data-id="rst" data-category="red small triangle">red small triangle</div> <div class="item" data-id="yst" data-category="yellow small triangle">yellow small triangle</div> <div class="item" data-id="gst" data-category="green small triangle">green small triangle</div> <div class="item" data-id="rmt" data-category="red medium triangle">red medium triangle</div> <div class="item" data-id="ymt" data-category="yellow medium triangle">yellow medium triangle</div> <div class="item" data-id="gmt" data-category="green medium triangle">green medium triangle</div> <div class="item" data-id="rlt" data-category="red large triangle">red large triangle</div> <div class="item" data-id="ylt" data-category="yellow large triangle">yellow large triangle</div> <div class="item" data-id="glt" data-category="green large triangle">green large triangle</div> </div>