javascript - 获取父行并在 JQuery 中找到一个元素

Question

我在 html 表格的一列中有一个复选框。当我选中或取消选中它时，我希望在同一行的下一列的文本区域中显示/删除一些文本。
我做了以下事情:

$(this).parent().parent().find('textarea').text = 'some text' 

还有

$(this).parent().parent().find('textarea').val = 'some text' 

但它不起作用。

html 是这样的:

<tr>
    <td>
        <input type="checkbox" />
    </td>
    <td>
        <textarea>
    </td>
</tr>

我想获取我选中的复选框的相同 tr 的文本区域

更新

我发现我应该使用 .val("some text") 但现在只有当我点击第一行的复选框时才会调用该函数。不为其余

Answer 1

问题在于您尝试设置值的方式，而不是您查找元素的方式

试试这个

$(this).closest('tr').find('textarea').val("some text");

有关详细信息，请参见此处。 val()

更新

元素 ID 必须是唯一的，这样您就不能重复使用同一个元素。为所有复选框提供唯一 ID，即“chkOne”、“chkTwo”等。然后在您希望从中运行此功能的所有复选框上使用一个类。即 class="chkSelection"。然后将您的 jQuery 更改为如下所示

$('.chkSelection').change(function() {
   if($(this).is(':checked')){
      $(this).closest('tr').find('textarea:first').text('Some text here');
   }
});

这样一来，所有带有“chkSelection”类的复选框在更改时都会运行查找下一个文本区域并设置文本的功能。