Get the parent row and find an element in JQuery

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

Answers


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.


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.


try this code

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

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");

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


my solution

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

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.

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.


Need Your Help

How to remove first " from string

java json

I am getting this string from server I need to remove first and last "

How would I go about forming this controller correctly in Rails?

ruby-on-rails ruby ruby-on-rails-3

How would I define in my controller to run and do the following when the Class is fetched in URL;

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.