Get the parent row and find an element in JQuery

Question

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:

$(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:

<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

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

Solution 1

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 ID has 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

$('.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.

Solution 2

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:

<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.

Solution 3

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()

Solution 4

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)

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

Solution 5

try this code

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

View more solutions

Comments

[CodingIntrigue]

Like the idea, but what if he has many of these rows? Not against the ID idea, but wouldn't it be better to store the ID of the target in a data- attribute on the checkbox so that IDs don't need to be hard-coded in the JS?

[Grant Thomas]

@RGraham Sure, sounds like a reasonable enhancement; but the id can still be the id, just find it from the current element and maybe use a "suffix" variable to find the relevant thing, instead of repeating the data attributes over and over.

[Sid]

Give a class to the checkbox and the textarea instead of id.. That shall help I suppose

[Sid]

ID must always be unique while class can be generic.. Also when you use (this).parent.find(), you change will occur only to the specific element in that class

[Sid]

Also adding class attribute will also be efficient if you also also using other checkboxes which work for a different purpose in your form...

[Jim]

Yeap! This works! But how do I know if the checkbox is checked/unchecked inside the change?

[Mark Walters]

Add an if statement to test whether it is checked - see my update