how to hide textareas if checkboxes not checked - JQuery

Question

Hi,

I'm trying to use jQuery to look at a form and for each of the checkboxes 'if checked' then show a div containing a textarea.

Each div for checkbox id 'checkbiox_foo' is id 'checkbox_foo_reasons'

I'm a total noob at jquery so I've got this far but I can't select the div to hide or show it.

$(document).ready(function() {
 $('#storySelection input').each(function(){
  if($(this).is(':checked') ){
   alert($('#'+this.id+'_reasons'));

  }
 });
});

any help gratefully received.

Cheers,

Paul

Answer 1

Without seeing your HTML, I can't know for sure, but you might want something like this:

$(function () {
  $('#storySelection input').click(function () {
    var $this = $(this);
    if ($this.is(':checked')) {
      $this.next('div').show();
    } else {
      $this.next('div').hide();
    }
  })
});

Answer 2

You can do it using .change() and .toggle(), like this:

$(function() {
 $('#storySelection input').change(function() {
   $('#'+this.id+'_reasons').toggle(this.checked);
 });
})