使用复选框和jQuery条件过滤数据

Question

我需要使用复选框来过滤数据，当我点击两个复选框时，我必须使用and操作。

Planer Operator选中后，我需要同时显示Planer with Operator＆amp; Planer with Operator and Banksman。

Planer Operator＆amp; Banksman已选中我需要仅显示Planer with Operator and Banksman。因为它具有data-category值的两个值。我需要在这里使用and种操作。

我该怎么做？下面是代码。 请提出任何建议！

var $filterCheckboxes = $('input[type="checkbox"]');
$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);
  });
  var $filteredResults = $('.assetIDConfig');
  $.each(selectedFilters, function(name, filterValues) {
    $filteredResults = $filteredResults.filter(function() {
      var matched = false,
        currentFilterValues = $(this).data('category').split(',');
      $.each(currentFilterValues, function(_, currentFilterValue) {

        if ($.inArray(currentFilterValue, filterValues) != -1) {
          matched = true;
          return false;
        }
      });
      return matched;
    });
  });
  $('.assetIDConfig').hide().filter($filteredResults).show();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<table class="baseTable JobTable table text-center table-stripped table-bordered">
  <thead>
    <tr>
      <th style="text-align: center">Select</th>
      <th style="text-align: center">Description</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td style="text-align: center">
        <input type="checkbox" name="filterCheck" value="9" id="9" class="ConfigBundleCheckbox">
      </td>
      <td>
        Planer Operator
      </td>
    </tr>
    <tr>
      <td style="text-align: center">
        <input type="checkbox" name="filterCheck" value="10" id="10" class="ConfigBundleCheckbox">
      </td>
      <td>
        Banksman
      </td>
    </tr>
  </tbody>
</table>

<table class="ConfigTable JobTable table text-center table-stripped table-bordered">
  <thead>
    <tr>
      <th style="text-align: center">Description</th>
      <th></th>
    </tr>
  </thead>
  <tbody class="ConfigMatch">
    <tr class="assetIDConfig" data-category="11,9">
      <td>
       Planer with Operator
      </td>
      <td style="text-align: center">
        <button data-bundleid="5" class="btn btn-primary btn-sm">Select</button>
      </td>
    </tr>
    <tr class="assetIDConfig" data-category="11,9,10">
      <td>
         Planer with Operator and Banksman
      </td>
      <td style="text-align: center">
        <button data-bundleid="6" class="btn btn-primary btn-sm">Select</button>
      </td>
    </tr>
    <tr class="assetIDConfig" data-category="12,15">
      <td>
         Planer with Operator and Banksman and helper
      </td>
      <td style="text-align: center">
        <button data-bundleid="6" class="btn btn-primary btn-sm">Select</button>
      </td>
    </tr>
  </tbody>
</table>

Answer 1

您的代码是正确的，您只需要为两个复选框使用不同的名称。

var $filterCheckboxes = $('input[type="checkbox"]');
$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);
  });
  var $filteredResults = $('.assetIDConfig');
  $.each(selectedFilters, function(name, filterValues) {
    $filteredResults = $filteredResults.filter(function() {
      var matched = false,
        currentFilterValues = $(this).data('category').split(',');
      $.each(currentFilterValues, function(_, currentFilterValue) {

        if ($.inArray(currentFilterValue, filterValues) != -1) {
          matched = true;
          return false;
        }
      });
      return matched;
    });
  });
  $('.assetIDConfig').hide().filter($filteredResults).show();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<table class="baseTable JobTable table text-center table-stripped table-bordered">
  <thead>
    <tr>
      <th style="text-align: center">Select</th>
      <th style="text-align: center">Description</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td style="text-align: center">
        <input type="checkbox" name="filterCheck" value="9" id="9" class="ConfigBundleCheckbox">
      </td>
      <td>
        Planer Operator
      </td>
    </tr>
    <tr>
      <td style="text-align: center">
        <input type="checkbox" name="filterCheck1" value="10" id="10" class="ConfigBundleCheckbox">
      </td>
      <td>
        Banksman
      </td>
    </tr>
  </tbody>
</table>

<table class="ConfigTable JobTable table text-center table-stripped table-bordered">
  <thead>
    <tr>
      <th style="text-align: center">Description</th>
      <th></th>
    </tr>
  </thead>
  <tbody class="ConfigMatch">
    <tr class="assetIDConfig" data-category="11,9">
      <td>
       Planer with Operator
      </td>
      <td style="text-align: center">
        <button data-bundleid="5" class="btn btn-primary btn-sm">Select</button>
      </td>
    </tr>
    <tr class="assetIDConfig" data-category="11,9,10">
      <td>
         Planer with Operator and Banksman
      </td>
      <td style="text-align: center">
        <button data-bundleid="6" class="btn btn-primary btn-sm">Select</button>
      </td>
    </tr>
    <tr class="assetIDConfig" data-category="12,15">
      <td>
         Planer with Operator and Banksman and helper
      </td>
      <td style="text-align: center">
        <button data-bundleid="6" class="btn btn-primary btn-sm">Select</button>
      </td>
    </tr>
  </tbody>
</table>