过滤器（复选框和下拉列表）未正确更新

Question

我目前正在使用下拉过滤器（在DataTables上），我想在此之上添加一些复选框。我试图对复选框的每个单独使用相同的类来跟踪更改。以下js代码用于下拉过滤器。

$('.search-input-select').on('change', function() {
  var i = $(this).attr('data-column');
  var v = $(this).val();
  dataTable.columns(i).search(v).draw();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-striped table-bordered" style="width:50%; margin: 0px auto;">
  <thead>
    <tr>
      <th colspan="3" class="text-center">Filters</th>
    </tr>
  </thead>
  <tr>
    <td class="text-center align-middle">
      <select class="search-input-select">
        <option value="">All</option>
        <option value="g1">Optiong1</option>
        <option value="g2">Optiong2</option>
      </select>
    </td>
    <td class="text-center align-middle">
      <select class="search-input-select">
        <option value="">All</option>
        <option value="s1">Options1</option>
        <option value="s2">Options2</option>
      </select>
    </td>
    <td class="text-center align-middle">
      <div class="card-body">
        <div class="icheck1">
          <fieldset>
            <input type="checkbox" class="search-input-select" value="e1">
            <label for="input-2">Optione1</label>
          </fieldset>
        </div>
      </div>
    </td>
  </tr>
  <tr>
    <td style="padding: 0">
      <div class="card-body">
        <div class="">
          <fieldset>
            <input type="checkbox" class="search-input-select" value="0" checked>
            <label for="input-2"><small>Option0</small></label>
          </fieldset>
          <fieldset>
            <input type="checkbox" class="search-input-select" value="1" checked>
            <label for="input-2"><small>Option1</small></label>
          </fieldset>
          <fieldset>
            <input type="checkbox" class="search-input-select" value="1x" checked>
            <label for="input-2"><small>Option1x</small></label>
          </fieldset>
        </div>
      </div>
    </td>
    <td style="padding: 0">
      <div class="card-body">
        <div class="">
          <fieldset>
            <input type="checkbox" class="search-input-select" value="4" checked>
            <label for="input-2"><small>Option4</small></label>
          </fieldset>
          <fieldset>
            <input type="checkbox" class="search-input-select" value="5" checked>
            <label for="input-2"><small>Option5</small></label>
          </fieldset>
          <fieldset>
            <input type="checkbox" class="search-input-select" value="21" checked>
            <label for="input-2"><small>Option21</small></label>
          </fieldset>
        </div>
      </div>
    </td>
  </tr>
</table>

如果我只有下拉菜单，它目前可以使用，并且每次更改都会更新一次。每次我选中某项时，都带有该复选框，它将更新，但将忽略其余部分。有什么建议吗？