获取父行并在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>

我想获得与我选中的复选框相同行的文本区域

更新

我发现我应该使用.val("some text") 但现在这个函数仅在我单击第一行中的复选框时调用。不适用于其他行。

- Jim

---

只是说一下，应该是<textarea></textarea>。 - Py.

你的HTML每一行都遵循相同的结构吗？点击复选框的jQuery代码是什么？ - Mark Walters

@MarkWalters。是的，同样的结构。我需要的是当我在一行中点击一个复选框（开/关）时，下一列中的文本区域会更新。但是使用$（“#my_cb”）。click（function（）{}不起作用，因为现在所有复选框都有my_cb作为ID，我不知道如何将它们与单击函数唯一关联起来。 - Jim

Answer 1

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

尝试这样做。

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

点击此处了解更多信息。val()

更新

一个元素的ID必须是唯一的，因此您不能重复使用相同的ID。为所有复选框提供唯一的id，例如"chkOne"、"chkTwo"等。然后在所有要从中运行此功能的复选框上使用一个类，例如class="chkSelection"。然后将您的jQuery更改如下：

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

当所有带有"class=chkSelection"类的复选框被更改时，会运行功能来查找下一个文本区域并设置文本。

- Mark Walters

---

是的！这个可以工作！但是我如何知道复选框在change中是否被选中/取消选中？ - Jim

添加一个if语句来测试它是否被选中 - 请查看我的更新 - Mark Walters

Answer 2

只需为它们提供标识符，因为您肯定需要在其他地方引用它们（如果结构发生变化，它也不会作为副作用而破裂）- 请注意val()的使用：

<tr>
  <td><input id="someName" type="checkbox"/></td>
  <td><textarea id="someOther"></textarea></td>
</tr>

然后您可以明确引用它们：

$("#someName").change(function(e) { 
  $("#someOther").val("some value"); 
});

保持简单。

- Grant Thomas

---

喜欢这个想法，但如果他有很多这样的行怎么办？不反对ID的想法，但是将目标的ID存储在复选框的data-属性中是否更好，这样JS中就不需要硬编码ID了？ - CodingIntrigue

@RGraham 当然，这听起来是一个合理的增强；但是id仍然可以是id，只需从当前元素中找到它，可能使用“后缀”变量来查找相关内容，而不是一遍又一遍地重复数据属性。 - Grant Thomas

Answer 3

给所有复选框和文本区域分配通用类... 在复选框的.change()函数中尝试使用以下代码：（假设文本区域的类是textarea）

$(this).parent().find('.textarea').html("Your text here");

- Sid

---

给复选框和文本区域添加一个类，而不是使用ID。我想这样会有所帮助。 - Sid

ID必须始终是唯一的，而类可以是通用的。另外，当您使用(this).parent.find()时，更改仅会发生在该类中特定的元素上。 - Sid

如果您的表单中还使用了其他复选框来完成不同的任务，那么添加类属性也是有效的。 - Sid

Answer 4

尝试这段代码。

$("table input[type=checkbox]").change(function(){
  // Your code.
});

- Sohil Desai

Answer 5

要检查复选框是否被选中/未选中，请尝试attr('checked')..还要获取所有已选中复选框的值，请尝试'input[type="checkbox"]:checked').val()。

- Sid

Answer 6

我的解决方案

$('table input:checkbox').change(function(){
   $(this).parent().next().find('textarea').val("some text");
});

- dann

Answer 7

如果你想通过勾选/取消勾选框来切换文本，可以使用类似以下代码的方法：

$("input[type=checkbox]").change(function() {
    $(this).filter(":checked").parent().next().text('Text!");
    $(this).not(":checked").parent().next().text('');
})

这将监听页面上任何复选框的更改。当复选框更改时，它将选择复选框父级的兄弟节点（即包围复选框的下一个<td>元素），如果选中该框，则将其文本设置为“Text！”，否则为空字符串。

使用此方法的好处，除了文本开/关功能外，是您不需要分配CSS类/ ID才能使其正常工作。

- GChorn