How to hide rows by specific condition

Question

I have a simple function that I made which checks the left quantity of a row and if it is zero then hide it if the checkbox is checked. But it doesn't work, I tried to use .change function but it seems to be not working.

Can anyone please check what is wrong?

$("#get_zero").prop('checked')
{
    var td = $(".left_qty");
    if(td.text() == 0)
    {
        $(td).parent().hide();
    }
}

$("#get_zero").change(function(e)
{
    var td = $(".left_qty");
    if($(this).prop('checked'))
    {
        if(td.text() == 0)
        {
            $(td).parent().hide();
        }
    }
    else
    {
        $(td).parent().show();
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>
    <input type="checkbox" class="filled-in get_zero" id="get_zero" checked="checked" />
    <label for="get_zero">Show 0 Quantity Products</label>
</p>
<table class="table table-hover" id="products_table" style="border: 1px solid #000;">
  <tr style="color: #333333;">
    <th style="border-right: 1px solid #000;border-bottom: 1px solid #000;border-top:1px solid #000;">Name</th>
    <th style="border-right: 1px solid #000;border-bottom: 1px solid #000;border-top:1px solid #000;">Category</th>
    <th style="border-right: 1px solid #000;border-bottom: 1px solid #000;border-top:1px solid #000;">Nick</th>

    <th style="border-right: 1px solid #000;border-bottom: 1px solid #000;border-top:1px solid #000;">Color</th>
    <th style="border-right: 1px solid #000;border-bottom: 1px solid #000;border-top:1px solid #000;">Model</th>
    <th style="border-right: 1px solid #000;border-bottom: 1px solid #000;border-top:1px solid #000;">QtyIN</th>
    <th style="border-right: 1px solid #000;border-bottom: 1px solid #000;border-top:1px solid #000;">QtyOUT</th>
    <th style="border-right: 1px solid #000;border-bottom: 1px solid #000;border-top:1px solid #000;">Left</th>
    <th style="border-right: 1px solid #000;border-bottom: 1px solid #000;border-top:1px solid #000;">Cost</th>
    <th style="border-right: 1px solid #000;border-bottom: 1px solid #000;border-top:1px solid #000;">Total</th>
    <th style="text-align: center; border-right: 1px solid #000;border-bottom: 1px solid #000;border-top:1px solid #000;">Edit/Update</th>
    <th style="text-align: center;border-bottom: 1px solid #000;border-top:1px solid #000;">Delete</th>
  </tr>

  <tr class="product_rows" id="tr_4">
    <td style="border-right: 1px solid #000;border-bottom: 1px solid #000;"><a target="_blank" href="/report/stock/4/full">crown cooking rang 27m black body</a></td>
    <td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">cooking rang</td>
    <td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">cr</td>

    <td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">black</td>
    <td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">27m</td>
    <td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">18</td>
    <td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">16</td>
    <td class="left_qty" style="border-right: 1px solid #000;border-bottom: 1px solid #000;">2</td>
    <td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">13,500.00</td>
    <td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">27,000.00</td>
    <td style="text-align: center; border-right: 1px solid #000;border-bottom: 1px solid #000;">
      <a class="fa fa-edit fa-lg" href="/products/edit/4"></a>
    </td>
    <td style="text-align: center;border-bottom: 1px solid #000;">
      <a class="fa fa-trash-o fa-lg delete_item" data-toggle="collapse" data-target="#form_del_4" id="del_4"></a>
    </td>
  </tr>

  <tr class="product_rows" id="tr_5">
    <td style="border-right: 1px solid #000;border-bottom: 1px solid #000;"><a target="_blank" href="/report/stock/5/full">canon cooking rang c28 steel body</a></td>
    <td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">cooking rang</td>
    <td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">cr2</td>

    <td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">steel</td>
    <td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">c28</td>
    <td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">20</td>
    <td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">11</td>
    <td class="left_qty" style="border-right: 1px solid #000;border-bottom: 1px solid #000;">9</td>
    <td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">15,000.00</td>
    <td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">135,000.00</td>
    <td style="text-align: center; border-right: 1px solid #000;border-bottom: 1px solid #000;">
      <a class="fa fa-edit fa-lg" href="/products/edit/5"></a>
    </td>
    <td style="text-align: center;border-bottom: 1px solid #000;">
      <a class="fa fa-trash-o fa-lg delete_item" data-toggle="collapse" data-target="#form_del_5" id="del_5"></a>
    </td>
  </tr>

  <tr class="product_rows" id="tr_6">
    <td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">
      <a target="_blank" href="/report/stock/6/full">stone gas billton oven 22x22</a>
    </td>
    <td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">billton oven</td>
    <td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">bo</td>

    <td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">steel</td>
    <td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">22x22</td>
    <td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">6</td>
    <td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">6</td>
    <td class="left_qty" style="border-right: 1px solid #000;border-bottom: 1px solid #000;">0</td>
    <td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">8,500.00</td>
    <td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">0.00</td>
    <td style="text-align: center; border-right: 1px solid #000;border-bottom: 1px solid #000;">
      <a class="fa fa-edit fa-lg" href="/products/edit/6"></a>
    </td>
    <td style="text-align: center;border-bottom: 1px solid #000;">
      <a class="fa fa-trash-o fa-lg delete_item" data-toggle="collapse" data-target="#form_del_6" id="del_6"></a>
    </td>
  </tr>

  <tr class="product_rows" id="tr_7">
    <td style="border-right: 1px solid #000;border-bottom: 1px solid #000;"><a target="_blank" href="/report/stock/7/full">Juicer Hit</a></td>
    <td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">Juicer</td>
    <td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">j1</td>

    <td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">white</td>
    <td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">j1</td>
    <td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">300</td>
    <td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">24</td>
    <td class="left_qty" style="border-right: 1px solid #000;border-bottom: 1px solid #000;">276</td>
    <td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">1,200.00</td>
    <td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">331,200.00</td>
    <td style="text-align: center; border-right: 1px solid #000;border-bottom: 1px solid #000;">
      <a class="fa fa-edit fa-lg" href="/products/edit/7"></a>
    </td>
    <td style="text-align: center;border-bottom: 1px solid #000;">
      <a class="fa fa-trash-o fa-lg delete_item" data-toggle="collapse" data-target="#form_del_7" id="del_7"></a>
    </td>
  </tr>
</table>

Answer 1

You need to test for the checked status within your change-event callback. Also, you need to iterate over the cells you want to check, and make the check for each of them.

You should also call the handler on page load so the initial visualisation is also consistent with the checkbox. Finally, you can use toggle for showing/hiding:

$("#get_zero").change(function(e) {
    var show = $(this).is(':checked');
    $(".left_qty").each(function () { // Iterate over cells
        $(this).parent().toggle(show || $(this).text() != 0);
    });
}).change(); // trigger on page load also

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>
      <input type="checkbox" class="filled-in get_zero" id="get_zero" checked="checked" />
      <label for="get_zero">Show 0 Quantity Products</label>
    </p>
<table class="table table-hover" id="products_table" style="border: 1px solid #000;">
  <tr style="color: #333333;">
    <th style="border-right: 1px solid #000;border-bottom: 1px solid #000;border-top:1px solid #000;">Name</th>
    <th style="border-right: 1px solid #000;border-bottom: 1px solid #000;border-top:1px solid #000;">Category</th>
    <th style="border-right: 1px solid #000;border-bottom: 1px solid #000;border-top:1px solid #000;">Nick</th>

    <th style="border-right: 1px solid #000;border-bottom: 1px solid #000;border-top:1px solid #000;">Color</th>
    <th style="border-right: 1px solid #000;border-bottom: 1px solid #000;border-top:1px solid #000;">Model</th>
    <th style="border-right: 1px solid #000;border-bottom: 1px solid #000;border-top:1px solid #000;">QtyIN</th>
    <th style="border-right: 1px solid #000;border-bottom: 1px solid #000;border-top:1px solid #000;">QtyOUT</th>
    <th style="border-right: 1px solid #000;border-bottom: 1px solid #000;border-top:1px solid #000;">Left</th>
    <th style="border-right: 1px solid #000;border-bottom: 1px solid #000;border-top:1px solid #000;">Cost</th>
    <th style="border-right: 1px solid #000;border-bottom: 1px solid #000;border-top:1px solid #000;">Total</th>
    <th style="text-align: center; border-right: 1px solid #000;border-bottom: 1px solid #000;border-top:1px solid #000;">Edit/Update</th>
    <th style="text-align: center;border-bottom: 1px solid #000;border-top:1px solid #000;">Delete</th>
  </tr>

  <tr class="product_rows" id="tr_4">
    <td style="border-right: 1px solid #000;border-bottom: 1px solid #000;"><a target="_blank" href="/report/stock/4/full">crown</a></td>
    <td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">cooking rang</td>
    <td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">cr</td>

    <td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">black</td>
    <td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">27m</td>
    <td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">18</td>
    <td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">16</td>
    <td class="left_qty" style="border-right: 1px solid #000;border-bottom: 1px solid #000;">2</td>
    <td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">13,500.00</td>
    <td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">27,000.00</td>
    <td style="text-align: center; border-right: 1px solid #000;border-bottom: 1px solid #000;">
      <a class="fa fa-edit fa-lg" href="/products/edit/4"></a>
    </td>
    <td style="text-align: center;border-bottom: 1px solid #000;">
      <a class="fa fa-trash-o fa-lg delete_item" data-toggle="collapse" data-target="#form_del_4" id="del_4"></a>

    </td>
  </tr>


  <tr class="product_rows" id="tr_5">
    <td style="border-right: 1px solid #000;border-bottom: 1px solid #000;"><a target="_blank" href="/report/stock/5/full">canon</a></td>
    <td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">cooking rang</td>
    <td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">cr2</td>

    <td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">steel</td>
    <td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">c28</td>
    <td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">20</td>
    <td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">11</td>
    <td class="left_qty" style="border-right: 1px solid #000;border-bottom: 1px solid #000;">9</td>
    <td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">15,000.00</td>
    <td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">135,000.00</td>
    <td style="text-align: center; border-right: 1px solid #000;border-bottom: 1px solid #000;">
      <a class="fa fa-edit fa-lg" href="/products/edit/5"></a>
    </td>
    <td style="text-align: center;border-bottom: 1px solid #000;">
      <a class="fa fa-trash-o fa-lg delete_item" data-toggle="collapse" data-target="#form_del_5" id="del_5"></a>

    </td>
  </tr>


  <tr class="product_rows" id="tr_6">
    <td style="border-right: 1px solid #000;border-bottom: 1px solid #000;"><a target="_blank" href="/report/stock/6/full">stone</a></td>
    <td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">billton oven</td>
    <td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">bo</td>

    <td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">steel</td>
    <td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">22x22</td>
    <td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">6</td>
    <td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">6</td>
    <td class="left_qty" style="border-right: 1px solid #000;border-bottom: 1px solid #000;">0</td>
    <td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">8,500.00</td>
    <td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">0.00</td>
    <td style="text-align: center; border-right: 1px solid #000;border-bottom: 1px solid #000;">
      <a class="fa fa-edit fa-lg" href="/products/edit/6"></a>
    </td>
    <td style="text-align: center;border-bottom: 1px solid #000;">
      <a class="fa fa-trash-o fa-lg delete_item" data-toggle="collapse" data-target="#form_del_6" id="del_6"></a>

    </td>
  </tr>


  <tr class="product_rows" id="tr_7">
    <td style="border-right: 1px solid #000;border-bottom: 1px solid #000;"><a target="_blank" href="/report/stock/7/full">Juicer</a></td>
    <td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">Juicer</td>
    <td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">j1</td>

    <td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">white</td>
    <td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">j1</td>
    <td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">300</td>
    <td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">24</td>
    <td class="left_qty" style="border-right: 1px solid #000;border-bottom: 1px solid #000;">276</td>
    <td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">1,200.00</td>
    <td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">331,200.00</td>
    <td style="text-align: center; border-right: 1px solid #000;border-bottom: 1px solid #000;">
      <a class="fa fa-edit fa-lg" href="/products/edit/7"></a>
    </td>
    <td style="text-align: center;border-bottom: 1px solid #000;">
      <a class="fa fa-trash-o fa-lg delete_item" data-toggle="collapse" data-target="#form_del_7" id="del_7"></a>

    </td>
  </tr>
</table>

Answer 2

I think this is what you're after. You want to bind a change event handler to your checkbox and when it changes, loop through the left_qty cells.

$("#get_zero").change(function(e) {
    $('td.left_qty').each(function() {
      if ($(this).text() == 0 && !$("#get_zero").is(':checked')) {
        $(this).parent().hide()
      } else {
        $(this).parent().show()
      }
    })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>
  <input type="checkbox" class="filled-in get_zero" id="get_zero" checked="checked" />
  <label for="get_zero">Show 0 Quantity Products</label>
</p>
<table class="table table-hover" id="products_table" style="border: 1px solid #000;">
  <tr style="color: #333333;">
    <th style="border-right: 1px solid #000;border-bottom: 1px solid #000;border-top:1px solid #000;">Name</th>
    <th style="border-right: 1px solid #000;border-bottom: 1px solid #000;border-top:1px solid #000;">Category</th>
    <th style="border-right: 1px solid #000;border-bottom: 1px solid #000;border-top:1px solid #000;">Nick</th>

    <th style="border-right: 1px solid #000;border-bottom: 1px solid #000;border-top:1px solid #000;">Color</th>
    <th style="border-right: 1px solid #000;border-bottom: 1px solid #000;border-top:1px solid #000;">Model</th>
    <th style="border-right: 1px solid #000;border-bottom: 1px solid #000;border-top:1px solid #000;">QtyIN</th>
    <th style="border-right: 1px solid #000;border-bottom: 1px solid #000;border-top:1px solid #000;">QtyOUT</th>
    <th style="border-right: 1px solid #000;border-bottom: 1px solid #000;border-top:1px solid #000;">Left</th>
    <th style="border-right: 1px solid #000;border-bottom: 1px solid #000;border-top:1px solid #000;">Cost</th>
    <th style="border-right: 1px solid #000;border-bottom: 1px solid #000;border-top:1px solid #000;">Total</th>
    <th style="text-align: center; border-right: 1px solid #000;border-bottom: 1px solid #000;border-top:1px solid #000;">Edit/Update</th>
    <th style="text-align: center;border-bottom: 1px solid #000;border-top:1px solid #000;">Delete</th>
  </tr>

  <tr class="product_rows" id="tr_4">
    <td style="border-right: 1px solid #000;border-bottom: 1px solid #000;"><a target="_blank" href="/report/stock/4/full">crown cooking rang 27m black body</a></td>
    <td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">cooking rang</td>
    <td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">cr</td>

    <td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">black</td>
    <td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">27m</td>
    <td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">18</td>
    <td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">16</td>
    <td class="left_qty" style="border-right: 1px solid #000;border-bottom: 1px solid #000;">2</td>
    <td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">13,500.00</td>
    <td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">27,000.00</td>
    <td style="text-align: center; border-right: 1px solid #000;border-bottom: 1px solid #000;">
      <a class="fa fa-edit fa-lg" href="/products/edit/4"></a>
    </td>
    <td style="text-align: center;border-bottom: 1px solid #000;">
      <a class="fa fa-trash-o fa-lg delete_item" data-toggle="collapse" data-target="#form_del_4" id="del_4"></a>

    </td>
  </tr>


  <tr class="product_rows" id="tr_5">
    <td style="border-right: 1px solid #000;border-bottom: 1px solid #000;"><a target="_blank" href="/report/stock/5/full">canon cooking rang c28 steel body</a></td>
    <td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">cooking rang</td>
    <td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">cr2</td>

    <td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">steel</td>
    <td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">c28</td>
    <td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">20</td>
    <td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">11</td>
    <td class="left_qty" style="border-right: 1px solid #000;border-bottom: 1px solid #000;">9</td>
    <td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">15,000.00</td>
    <td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">135,000.00</td>
    <td style="text-align: center; border-right: 1px solid #000;border-bottom: 1px solid #000;">
      <a class="fa fa-edit fa-lg" href="/products/edit/5"></a>
    </td>
    <td style="text-align: center;border-bottom: 1px solid #000;">
      <a class="fa fa-trash-o fa-lg delete_item" data-toggle="collapse" data-target="#form_del_5" id="del_5"></a>

    </td>
  </tr>


  <tr class="product_rows" id="tr_6">
    <td style="border-right: 1px solid #000;border-bottom: 1px solid #000;"><a target="_blank" href="/report/stock/6/full">stone gas billton oven 22x22</a></td>
    <td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">billton oven</td>
    <td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">bo</td>

    <td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">steel</td>
    <td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">22x22</td>
    <td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">6</td>
    <td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">6</td>
    <td class="left_qty" style="border-right: 1px solid #000;border-bottom: 1px solid #000;">0</td>
    <td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">8,500.00</td>
    <td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">0.00</td>
    <td style="text-align: center; border-right: 1px solid #000;border-bottom: 1px solid #000;">
      <a class="fa fa-edit fa-lg" href="/products/edit/6"></a>
    </td>
    <td style="text-align: center;border-bottom: 1px solid #000;">
      <a class="fa fa-trash-o fa-lg delete_item" data-toggle="collapse" data-target="#form_del_6" id="del_6"></a>

    </td>
  </tr>


  <tr class="product_rows" id="tr_7">
    <td style="border-right: 1px solid #000;border-bottom: 1px solid #000;"><a target="_blank" href="/report/stock/7/full">Juicer Hit</a></td>
    <td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">Juicer</td>
    <td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">j1</td>

    <td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">white</td>
    <td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">j1</td>
    <td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">300</td>
    <td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">24</td>
    <td class="left_qty" style="border-right: 1px solid #000;border-bottom: 1px solid #000;">276</td>
    <td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">1,200.00</td>
    <td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">331,200.00</td>
    <td style="text-align: center; border-right: 1px solid #000;border-bottom: 1px solid #000;">
      <a class="fa fa-edit fa-lg" href="/products/edit/7"></a>
    </td>
    <td style="text-align: center;border-bottom: 1px solid #000;">
      <a class="fa fa-trash-o fa-lg delete_item" data-toggle="collapse" data-target="#form_del_7" id="del_7"></a>

    </td>
  </tr>
</table>