mardi 28 mars 2017

Why my code don't count row in table when using filter checkbox

I have table with checkbox filter, when run code the count run good, but when i checkbox to filter it don't count any, my 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);
}

When i checked checkbox, but function to count row in table not run

How i can count row in table when using filter checkbox ?

Thank you

Code jsfiddle




Aucun commentaire:

Enregistrer un commentaire