I have a table in which each row contains 8 <td> cells. 7 of the <td> cells contain a checkbox, for things like "Breakfast", "Lunch", "Dinner", etc.
The page has a dropdown menu that lets the user specify that he wants to see only the items for which the "Breakfast", or "Lunch", or "Dinner", etc. checkbox is checked. So let's say the user selects the "Breakfast" checkbox from the dropdown menu. How could I hide all the rows in which the "Breakfast" checkbox is not checked? Here's sample HTML and (flawed) jQuery code: <table class="food_planner"> <tr> <td> <center> <input type="checkbox" name="food_id_5" value="9003" ><br> Delete </center> </td> <td> Apples, raw, with skin<br> </td> <td> <center> <input type="checkbox" name="Breakfast_id_5" value="9003" ><br> Breakfast </center> </td> <td> <center> <input type="checkbox" name="Lunch_id_5" value="9003" ><br> Lunch </center> </td> <td> <center> <input type="checkbox" name="Dinner_id_5" value="9003" ><br> Dinner </center> </td> <td> <center> <input type="checkbox" name="Snacks_id_5" value="9003" ><br> Snacks </center> </td> <td> <center> <input type="checkbox" name="Fruit_id_5" value="9003" ><br> Fruit </center> </td> <td> <center> <input type="checkbox" name="Veggies_id_5" value="9003" ><br> Veggies </center> </td> </tr> </table> //All this jQuery code works, except for the marked line! $("#Filter_Dropdown").change(function () { var str = ""; var orig_str = ""; orig_str = $("#Filter_Dropdown option:selected").text(); str = '.' + orig_str; $(".food_planner tbody tr").show(); if (str != '.Show All') { $(".food_planner tbody tr").hide(); //What is the correct version of the following line? $(".food_planner tbody tr:nth-child(2)"). ("input:checked").parent().show(); } });