5

我在 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")但现在只有当我单击第一行中的复选框时才会调用该函数。不为其余

4

7 回答 7

18

问题在于您如何尝试设置值而不是如何找到元素

试试这个

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

请参阅此处了解更多信息。值（）

更新

元素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”类的复选框在更改时都将运行查找下一个文本区域并设置文本的功能。

于 2013-08-23T08:20:30.417 回答
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"); 
});

把事情简单化。

于 2013-08-23T08:20:19.937 回答
1

为所有复选框和文本区域提供通用类...在复选框的 .change() 函数中尝试使用：（考虑到文本区域的类是文本区域）

$(this).parent().find('.textarea').html("Your text here");
于 2013-08-23T08:24:17.663 回答
1

试试这个代码

$("table input[type=checkbox]").change(function(){
  // Your code.
});
于 2013-08-23T08:28:54.010 回答
1

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

于 2013-08-23T08:49:16.573 回答
0

我的解决方案 

$('table input:checkbox').change(function(){
   $(this).parent().next().find('textarea').val("some text");
});
于 2013-08-23T08:32:06.087 回答
0

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

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

这将监听页面上任何复选框的任何更改。当复选框更改时，它将选择复选框的父级兄弟（<td>复选框周围的元素之后的下一个元素）并将其文本设置为“文本！” 如果该框被选中，或者如果该框未选中，则为空字符串。

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

于 2013-08-23T08:52:59.100 回答