How to select a element in the clicked table row of a HTML table using Jquery?

Question

I have a table with 2 columns, I'm using PHP to generate dynamically rows to the table. Every table row have the following fields:

• Input Type="checkbox"
• Two Inputs type="text" inside a div

What I like to do is to hide the div containing the two inputs type text when the checkbox is checked, I tried to get the parent of the clicked checkbox using Jquery and then hide the corresponding div inside the currrent <tr> but it's not working.

This is the HTML code to see how is my table generated:

<table>

<tr>
    <th>Hide?</th>
    <th>Inputs</th>
</tr>

<tr>
    <td>
        <input type="checkbox" name="checkBoxes[]">
    </td>
    <td>
        <div class="two-inputs">
            <input type="text" name="inputs[]">
            <input type="text" name="inputs[]">
        </div>
    </td>

</tr>

<tr>
    <td>
        <input type="checkbox" name="checkBoxes[]">
    </td>
    <td>
        <div class="two-inputs">
            <input type="text" name="inputs[]">
            <input type="text" name="inputs[]">
        </div>
    </td>

</tr>

Answer 1

Try This. jsfiddle

$("input:checkbox").click(function(){
   if(this.checked){
      $(this).parent().next().find("div").hide();
   }  
    else{
             $(this).parent().next().find("div").show();
    }

});

Answer 2

$('input:checkbox').click(function() {
    if (!$(this).is(':checked')) {
        $(this).parent().next('.two-inputs').hide();
    }
});