フィルタを使用しているときにコード内の行がカウントされないのはなぜですか？

Question

コードを実行するとチェックボックスフィルタが付いたテーブルがありますが、フィルタを実行するときにチェックボックスをオンにしてもカウントされません.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

Answer 1

物事のカップルをいただき、ありがとうございます。フィルタはtr要素を破棄しません。 jquery：visibleと：hiddenフィルタはdisplay属性に基づいてカウントされます。 onchangeハンドラ内のcountフィールドの値を再計算する必要があります。 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); 
} 

Answer 2

2つの問題：

1. フィルタが変更されたときあなたはあなたのchct機能を呼び出すことはありません。
2. セレクタが表示されなくても、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>

Answer 3

使用：目に見えるが

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