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

Javascript 获取父行并在JQuery中查找元素,javascript,jquery,html,string,traversal,Javascript,Jquery,Html,String,Traversal,我在html表的一列中有一个复选框。当我选中或取消选中时,我希望在同一行的下一列的文本区域中显示/删除一些文本。 我做了以下工作: $(this).parent().parent().find('textarea').text = 'some text' 而且 $(this).parent().parent().find('textarea').val = 'some text' 但它不起作用 html类似于: <tr> <td> <

我在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的文本区域

更新


我发现我应该使用.valsome文本,但现在只有单击第一行中的复选框,才能调用该函数。其余部分不需要

只需给它们标识,因为您肯定需要在其他地方引用它们,如果您的结构发生变化,它不会因为副作用而中断-请注意val的使用:


保持简单。

问题在于如何设置值,而不是如何查找元素

试试这个

$(this).closest('tr').find('textarea').val("some text");
更多信息请参见此处

更新

元素ID必须是唯一的,因此不能重复使用同一个元素ID。为所有复选框指定唯一id,即chkOne、chkTwo等。然后在所有希望从中运行此功能的复选框上使用类。i、 e类=chkSelection。然后将jQuery更改为如下所示

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

这样,当更改时,所有带有chkSelection类的复选框都将运行查找下一个文本区域并设置文本的功能。

为所有复选框和文本区域指定通用类。。。在复选框的.change函数中,尝试使用以下方法:考虑textarea的类是textarea

$(this).parent().find('.textarea').html("Your text here");
试试这个代码

$("table input[type=checkbox]").change(function(){
  // Your code.
});
我的解决方案

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

要检查复选框是否已选中/未选中,请尝试attr'checked'。。另外,要获取所有选中复选框的值,请尝试“输入[类型=复选框]:选中”。val

如果您希望能够通过选中/取消选中复选框来打开和关闭文本,类似的操作将起作用:

$("input[type=checkbox]").change(function() {
    $(this).filter(":checked").parent().next().text('Text!");
    $(this).not(":checked").parent().next().text('');
})
这将侦听对页面上任何复选框的任何更改。当复选框更改时,它将选择复选框的父项的同级元素,即复选框周围元素之后的下一个元素,并将其文本设置为“text!”如果复选框已选中,或如果复选框未选中,则为空字符串


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

只是说,但您的HTML在每一行中是否遵循相同的结构?单击复选框的jQuery的其余部分是什么?@MarkWalters.Yes相同的结构。我需要的是当我在一行中单击复选框开/关时,下一列中的文本区域将被更新。但是使用$my_cb.click函数{这不起作用,因为现在所有的复选框都有my_cb as id,我不知道如何将它们与单击功能唯一地关联查看我的更新答案就像这个想法一样,但是如果他有很多这样的行呢?这不违背id的想法,但是将目标的id存储在复选框的data-attribute中,这样id就不需要了,不是更好吗在JS中进行硬编码?@RGraham当然,听起来是一个合理的增强;但是id仍然可以是id,只需从当前元素中找到它,并可能使用后缀变量来查找相关内容,而不是反复重复数据属性。为复选框和文本区域指定一个类,而不是id。这将有助于我支持当类可以是泛型的时候,poseID必须始终是唯一的。另外,当您使用this.parent.find时,您只会对该类中的特定元素进行更改。如果您还在表单中使用其他用于不同目的的复选框,则添加class属性也将是有效的…是的!这是有效的!但是我如何知道复选框是否在更改中选中/取消选中x?添加if语句以测试是否选中它-请参阅我的更新
$('table input:checkbox').change(function(){
   $(this).parent().next().find('textarea').val("some text");
});
$("input[type=checkbox]").change(function() {
    $(this).filter(":checked").parent().next().text('Text!");
    $(this).not(":checked").parent().next().text('');
})