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的textarea

更新

我发现我应该使用.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”类的复选框在更改时都会运行功能来查找下一个textarea并设置文本。

Answer 2

只要给他们标识符，你肯定需要在别处以某种方式引用它们（如果你的结构改变它不会作为副作用破坏） - 请注意val()的使用：< / p>

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

然后你可以明确地引用它们：

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

保持简单。

Answer 3

为所有复选框和textareas提供泛型类...在复选框的.change（）函数中尝试使用:(考虑textarea的类是textarea）

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

Answer 4

试试这段代码

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

Answer 5

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

Answer 6

我的解决方案

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

Answer 7

如果您希望能够通过选中/取消选中此框来打开和关闭文本，则可以使用以下内容：

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

这会听取您网页上任何复选框的任何更改。当复选框更改时，它将选中复选框的父级兄弟（在复选框周围的<td>元素之后），并将其文本设置为“文本！”如果选中此框，或者如果未选中此框则为空字符串。

除了文本开/关功能之外，使用此方法的好处是您无需为其分配CSS类/ ID。

获取父行并在JQuery中查找元素

7 个答案: