为什么我的代码在使用过滤器复选框时不计算表中的行数答案

【问题标题】：Why my code don't count row in table when using filter checkbox为什么我的代码在使用过滤器复选框时不计算表中的行数
【发布时间】：2017-03-28 08:34:19
【问题描述】：

我有带有复选框过滤器的表，当运行代码时计数运行良好，但是当我用复选框过滤它时，我的 html：

<table class="checkcontainer">
  <tr>
    <td>
      <input type='checkbox' name='filter' id="One" checked="" value="One" onchange="chct()"/> One
    </td>
    <td>
      <input type='checkbox' name='filter' id="Two" checked="" value="Two" /> Two
    </td>
    <td>
      <input type='checkbox' name='filter' id="Three" checked="" value="Three" /> Three
    </td>
  </tr>
</table>

<table class="datatbl" border=1 >
  <tr>
    <th>No.</th>
    <th>Content</th>
    <th>Type</th>
  </tr>
  <tbody id="aaa">
  <tr data-rowtype="One">
    <td>1</td>
    <td>this is first row</td>
    <td>One</td>
  </tr>
  <tr data-rowtype="Two">
    <td>2</td>
    <td>this is second row</td>
    <td>Two</td>
  </tr>
  <tr data-rowtype="Three">
    <td>3</td>
    <td>this is third row</td>
    <td>Three</td>
  </tr>
  <tr data-rowtype="One">
    <td>4</td>
    <td>this is fourth row</td>
    <td>One</td>
  </tr>
  <tr data-rowtype="Two">
    <td>5</td>
    <td>this is fifth row</td>
    <td>Two</td>
  </tr>
  <tr data-rowtype="Three">
    <td>6</td>
    <td>this is sixth row</td>
    <td>Three</td>
  </tr>
</tbody>

JS：

window.console.clear();
$('.checkcontainer').on('change', 'input[type="checkbox"]', function() {
  var cbs = $('.checkcontainer').find('input[type="checkbox"]');
  var all_checked_types = [];
  cbs.each(function() {
    var mycheckbox = $(this);
    $('.datatbl tr').filter(function() {
        return $(this).data('rowtype') == mycheckbox.val();
    }).toggle(mycheckbox[0].checked);
  });
});
$("#total").text($("#aaa tr").length);
function chct() {  
$("#total").text($("#aaa tr").length);
}

当我选中复选框时，表中的行计数功能没有运行

使用过滤器复选框时如何计算表中的行数？

谢谢

Code jsfiddle

【问题讨论】：

标签： javascript checkbox filter count

【解决方案1】：

有几件事。过滤器不会破坏 tr 元素。 jquery :visible 和 :hidden 过滤器将根据 display 属性进行计数。并且您必须重新计算 onchange 处理程序中的计数字段值。 jsfiddle 已更新。

window.console.clear();
$('.checkcontainer').on('change', 'input[type="checkbox"]', function() {
  var cbs = $('.checkcontainer').find('input[type="checkbox"]');
  var all_checked_types = [];
  cbs.each(function() {
    var mycheckbox = $(this);
    $('.datatbl tr').filter(function() {
        return $(this).data('rowtype') == mycheckbox.val();
    }).toggle(mycheckbox[0].checked);
  });
});
$("#total").text($("#aaa tr").length);
function chct() {  
$("#total").text($("#aaa tr").length);
}

【讨论】：

【解决方案2】：

这里有两个问题：

当过滤器更改时，您不会调用 chct 函数。
您的选择器只获取tr 的编号，即使它们不可见。只需添加 :visible 即可。

window.console.clear();
$('.checkcontainer').on('change', 'input[type="checkbox"]', function() {
  var cbs = $('.checkcontainer').find('input[type="checkbox"]');
  var all_checked_types = [];
  cbs.each(function() {
    var mycheckbox = $(this);
    $('.datatbl tr').filter(function() {
        return $(this).data('rowtype') == mycheckbox.val();
    }).toggle(mycheckbox[0].checked);
  });
  chct();
});
$("#total").text($("#aaa tr").length);
function chct() {  
$("#total").text($("#aaa tr:visible").length);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="checkcontainer">
  <tr>
    <td>
      <input type='checkbox' name='filter' id="One" checked="" value="One" onchange="chct()"/> One
    </td>
    <td>
      <input type='checkbox' name='filter' id="Two" checked="" value="Two" /> Two
    </td>
    <td>
      <input type='checkbox' name='filter' id="Three" checked="" value="Three" /> Three
    </td>
  </tr>
</table>

<table class="datatbl" border=1 >
  <tr>
    <th>No.</th>
    <th>Content</th>
    <th>Type</th>
  </tr>
  <tbody id="aaa">
  <tr data-rowtype="One">
    <td>1</td>
    <td>this is first row</td>
    <td>One</td>
  </tr>
  <tr data-rowtype="Two">
    <td>2</td>
    <td>this is second row</td>
    <td>Two</td>
  </tr>
  <tr data-rowtype="Three">
    <td>3</td>
    <td>this is third row</td>
    <td>Three</td>
  </tr>
  <tr data-rowtype="One">
    <td>4</td>
    <td>this is fourth row</td>
    <td>One</td>
  </tr>
  <tr data-rowtype="Two">
    <td>5</td>
    <td>this is fifth row</td>
    <td>Two</td>
  </tr>
  <tr data-rowtype="Three">
    <td>6</td>
    <td>this is sixth row</td>
    <td>Three</td>
  </tr>
</tbody>
</table>
<div id="total">
  empty
</div>

【讨论】：

如果这解决了您的问题，请您接受答案（向上/向下投票按钮下方的白色复选标记）以表明该问题已得到解答。谢谢。

【解决方案3】：

使用 :Visible（这会在该表中计算可见 tr）

window.console.clear();
$('.checkcontainer').on('change', 'input[type="checkbox"]', function() {

  var cbs = $('.checkcontainer').find('input[type="checkbox"]');
  var all_checked_types = [];
  cbs.each(function() {
    var mycheckbox = $(this);
    $('.datatbl tr').filter(function() {
        return $(this).data('rowtype') == mycheckbox.val();
    }).toggle(mycheckbox[0].checked);
  });

  chct();
});

function chct() {  
$("#total").text($("#aaa tr:visible").length);
}

JSFIDDLE

【讨论】：