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

Question

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

当检查Planer Operator我需要同时显示Planer with Operator & Planer with Operator and Banksman。

当两者都Planer Operator & 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>