Javascript 如何在表的单个行上捕获DOM

我有一个表格，每行包含一个复选框和多个输入框。 我想在选中复选框时更改该行所有输入框的值。目前我只访问第一个输入框。 我的密码是

<table>
    <tr>
        <td><input type="checkbox" class='isActive'/></td>
        <td><input type="text" class='name'/></td>
        <td><input type="text" class='name'/></td>
        <td><input type="text" class='name'/></td>
    </tr>
    <tr>
        <td><input type="checkbox" class='isActive'/></td>
        <td><input type="text" class='name'/></td>
        <td><input type="text" class='name'/></td>
        <td><input type="text" class='name'/></td>
    </tr>
</table>

如何解决这个问题。JS fiddle链接是

请执行以下操作：

$('body').on('click','.isActive',function(){
  if($(this).is(':checked')) {
    $(this).closest('tr').find('.name').val('Demian');
  } else {
    $(this).closest('tr').find('.name').val('');
  }
});

这将更改当前行上的所有

.name

元素。

---

正如j08691所指出的，您可以使用三元运算符来减少代码

将多个jQuery方法链接在一起时，可以将它们分开以便于识别：

$('body').on('click','.isActive',function(){
  $(this)
    .closest('tr')
    .find('.name')
    .val(this.checked ? 'Demian' : '');
});

请注意，您可以将

checked

属性简单地称为

this.checked

，而不是

$（this）.is（':checked'）

---

您只需要使用

.nextAll（）

而不是

.next（）

：

正如您所看到的，您可以使用a来减少代码量。

而不是

next（）

使用

parent（）

---

正如您所知，将点击绑定到正文（或文档，或其他类似内容）是一种不好的做法，最好尽可能地绑定到您的实际目标。

parent

会转到

td

，而

next

只会选择接下来的

td

。谢谢。另一个问题，如何将datepicker绑定到输入框$（this）.closest（'tr'）.find（'.name'）.datepicker（{format:'dd-mm-yyyy'}）；这不管用，我不太熟悉datepicker。可能值得作为一个新问题发布。实际上，如果包含jQueryUI库，您的代码似乎可以工作：

$('body').on('click','.isActive',function(){
  $(this)
    .closest('tr')
    .find('.name')
    .val(this.checked ? 'Demian' : '');
});

$('body').on('click', '.isActive', function () {
    $(this).parent().nextAll().find('.name').val($(this).is(':checked') ? 'Demian' : '');
});

$('body').on('click','.isActive',function(){
    if ($(this).is(':checked')) {
        $(this).parent().parent().find('.name').val('Demian');
    }
});