javascript 获取父行并在 JQuery 中查找元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18398042/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Get the parent row and find an element in JQuery
提问by Jim
I have a checkbox in a column of an html table. When I check or uncheck it I want some text to be displayed/removed from a text area in the next column of the same row.
I did the following:
我在 html 表的一列中有一个复选框。当我选中或取消选中它时，我希望在同一行的下一列的文本区域中显示/删除一些文本。
我做了以下事情：
$(this).parent().parent().find('textarea').text = 'some text'
and also
并且
$(this).parent().parent().find('textarea').val = 'some text'
but it does not work.
但它不起作用。
The html is like:
html是这样的：
<tr>
<td>
<input type="checkbox" />
</td>
<td>
<textarea>
</td>
</tr>
I want to get the textarea of the same tr of the checkbox I check
我想获取我选中的复选框的相同 tr 的 textarea
UPDATE
更新
I found that I should use .val("some text")but now the function is called only if I click the checkbox in the first row. Not for the rest
我发现我应该使用.val("some text")但现在只有当我单击第一行中的复选框时才会调用该函数。不为其余
回答by Mark Walters
The issue is with how you are trying to set the value not how you are finding the element
问题在于您如何尝试设置值而不是您如何找到元素
try this
试试这个
$(this).closest('tr').find('textarea').val("some text");
See here for more info .val()
请参阅此处了解更多信息。价值（）
UPDATE
更新
an element IDhas to be unique so you can't reuse the same one. Give all your checkboxes unique id's i.e "chkOne", "chkTwo" etc. Then use a class on all the checkboxes you wish to run this functionality from. i.e class="chkSelection". Then change your jQuery to look like this
元素ID必须是唯一的，因此您不能重复使用相同的元素。为您的所有复选框指定唯一 ID，即“chkOne”、“chkTwo”等。然后在您希望运行此功能的所有复选框上使用一个类。即class="chkSelection"。然后改变你的jQuery看起来像这样
$('.chkSelection').change(function() {
if($(this).is(':checked')){
$(this).closest('tr').find('textarea:first').text('Some text here');
}
});
This way all your checkboxes with a class of "chkSelection" when changed will run the functionality to find the next textarea and set the text.
这样，所有具有“chkSelection”类的复选框在更改时都将运行该功能以查找下一个文本区域并设置文本。
回答by Grant Thomas
Just give them identifiers, as surely you'll need to reference them somehow elsewhere (and if your structure changes it won't break as a side-effect) - note the use of val(), too:
只需给他们标识符，因为您肯定需要在其他地方以某种方式引用它们（如果您的结构发生变化，它不会作为副作用而中断）-也请注意使用val()：
<tr>
<td><input id="someName" type="checkbox"/></td>
<td><textarea id="someOther"></textarea></td>
</tr>
Then you can reference them explicitly:
然后你可以显式地引用它们：
$("#someName").change(function(e) {
$("#someOther").val("some value");
});
Keep it simple.
把事情简单化。
回答by Sid
To check if the checkbox is checked/unchecked, try attr('checked')..Also to get the values of all checked checkboxes, try 'input[type="checkbox"]:checked').val()
要检查复选框是否已选中/未选中，请尝试attr('checked')..同时获取所有选中复选框的值，请尝试'input[type="checkbox"]:checked').val()
回答by Sid
Give generic classes to all the checkboxes and textareas... In the .change() function of the checkbox try using this: (Considering the class of the textarea is textarea)
为所有复选框和文本区域提供通用类......在复选框的 .change() 函数中尝试使用：（考虑到文本区域的类是文本区域）
$(this).parent().find('.textarea').html("Your text here");
回答by Sohil Desai
try this code
试试这个代码
$("table input[type=checkbox]").change(function(){
// Your code.
});
回答by dann
my solution
我的解决方案
$('table input:checkbox').change(function(){
$(this).parent().next().find('textarea').val("some text");
});
回答by GChorn
If you want to be able to toggle the text on and off by checking/unchecking the box, something like this would work:
如果您希望能够通过选中/取消选中该框来打开和关闭文本，则可以使用以下方法：
$("input[type=checkbox]").change(function() {
$(this).filter(":checked").parent().next().text('Text!");
$(this).not(":checked").parent().next().text('');
})
This would listen for any change to any checkbox on your page. When a checkbox changes, it will select the checkbox's parent's sibling (the next <td>element after the one surrounding the checkbox) and set its text to 'Text!' if the box is checked, or an empty string if the box is unchecked.
这将侦听页面上任何复选框的任何更改。当复选框更改时，它将选择复选框的父级的同级（<td>复选框周围的元素之后的下一个元素）并将其文本设置为“文本！” 如果复选框被选中，或者如果复选框未被选中，则为空字符串。
The benefit to using this method, aside from the text on/off functionality, is that you don't need to assign CSS classes/ids for it to work.
除了文本开/关功能之外，使用此方法的好处是您无需为其分配 CSS 类/ID 即可工作。
