Javascript 为什么我的代码不'；“使用筛选器时不计算表中的行”复选框

我有一个带有复选框过滤器的表，当运行代码时，计数正常，但当我选中复选框进行过滤时，它不计数任何值，我的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>

当我选中复选框时，但统计表中的行的函数未运行

使用筛选复选框时如何计算表中的行数

多谢各位

---

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

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);
}

这里有两个问题：

当过滤器更改时，您不会调用

chct

函数

您的选择器只需获取

tr

的编号，即使它们不可见。只需添加

：可见的

window.console.clear（）；
$（'.checkcontainer'）。在（'change'，'input[type=“checkbox”]”上，函数（）{
var cbs=$（'.checkcontainer'）.find（'input[type=“checkbox”]”）；
var all_checked_TYPE=[]；
cbs.each（函数（）{
var mycheckbox=$（这个）；
$（'.datatbl tr'）.filter（函数（）{
返回$（this.data（'rowtype'）==mycheckbox.val（）；
}).toggle（mycheckbox[0]。已选中）；
});
chct（）；
});
$（“#总计”）.text（$（“#aaa tr”）.length）；
函数chct（）{
$（“#总计”）.text（$（“#aaa tr:可见”）.length）；
}

一个
两个
三
不
内容
类型
1.
这是第一排
一个
2.
这是第二排
两个
3.
这是第三排
三
4.
这是第四排
一个
5.
这是第五排
两个
6.
这是第六排
三
空的

使用：可见（这将统计该表中的可见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);
  });
});
$("#total").text($("#aaa tr").length);
function chct() {  
$("#total").text($("#aaa tr").length);
}

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);
}