javascript - 如何使用 Jquery 在 HTML 表格的单击表格行中选择一个元素？

Question

我有一个有 2 列的表，我正在使用 PHP 为表动态生成行。每个表格行都有以下字段：

• 输入类型="复选框"
• div 内的两个输入 type="text"

我喜欢做的是在选中复选框时隐藏包含两个输入类型文本的 div，我尝试使用 Jquery 获取单击复选框的父级，然后将相应的 div 隐藏在当前<tr>但它不起作用。

这是查看我的表格是如何生成的 HTML 代码：

<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

试试这个。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();
    }
});