Question

I’ve got a form with a load of checkboxes and textareas. When a checkbox is checked, the associated textarea appears. This is working fine.

However, I have a call to a database which gets information to populate the textareas with data if a certain query is made. An example of the HTML is as follows:

<li>
  <input type="checkbox" id="changes-trigger" />
  <label for="changes-trigger">Changes</label>
  <textarea id="changes" name="changes" rows="6" cols="40"><?php echo $report['changes']; ?></textarea>
</li>

If data is loaded into the textarea, I want the checkbox to be checked and for the textarea to be shown. If I target the textarea specifically using the id, I can do as I wish on page load:

if($('#changes').val()) {
  $('#changes-trigger').prop('checked','true');
  $('#changes').show();
}

However, as I said, I have a load of these and do not want to code for each individual one.
Not only doesn’t this do as I wish, it breaks the rest of my external .js file. Can anyone advise why the following doesn’t work?

if($('textarea').val()) {
  $(this).siblings('input').prop('checked','true');
  $(this).show();
}

Answer 1

I’d recommend to use each to iterate through all textareas in this way:

$('textarea').each(function () {
    if($(this).val()) {
        $(this).siblings('input').prop('checked','true');
        $(this).show();
    }
});