как скрыть текстовые поля, если флажки не установлены - JQuery

Question

Я пытаюсь использовать jQuery для просмотра формы и для каждого из флажков «если отмечено», а затем показать div, содержащий текстовое поле.

Каждый div для идентификатора флажка 'checkbiox_foo' является идентификатором 'checkbox_foo_reasons '

Я полный нуб в jquery, поэтому я дошел до этого, но не могу выбрать div, чтобы скрыть или показать его.

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

  }
 });
});

любая помощь с благодарностью получена.

Приветствия,

Пол

Answer 1

Вы можете сделать это, используя .change() и .toggle(), например:

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

Answer 2

Не видя ваш HTML, я не могу знать наверняка, но вы можете захотеть что-то вроде этого:

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