Показать поле ввода при проверке

Question

Вы можете увидеть в прилагаемой бумажной форме, что мне нужно преобразовать в веб-форму. Я хочу, чтобы он отображал флажки и отключал поля ввода, если пользователь не установит флажок рядом с ним. Я видел способы сделать это с одним или двумя элементами, но я хочу сделать это примерно с 20-30 парами проверки / ввода и не хочу повторять один и тот же код много раз. Я просто недостаточно опытен, чтобы понять это самостоятельно. Кто-нибудь знает где-нибудь, что объясняет, как это сделать? Спасибо!

P.S. В конечном итоге все эти данные будут отправлены по электронной почте с помощью PHP.

Answer 1

Я не думаю, что это хорошая идея.

Думайте о пользователях. Сначала они должны нажать, чтобы ввести значение. Поэтому им всегда нужно менять руку с мыши на клавиатуру. Это не очень удобно.

Почему бы просто не дать текстовые поля? При отправке по электронной почте вы можете просто пропустить пустые значения.

Answer 2

в вашем HTML:

//this will be the structure of each checkbox and input element.
<input type="checkbox" value="Public Relations" name="skills" /><input type="text" class="hidden"/> Public Relations <br/>

в вашем CSS:

.hidden{
  display:none;
}
.shown{
  display:block;
}

в вашем jQuery:

$('input[type=checkbox]').on('click', function () {
  // our variable is defined as, "this.checked" - our value to test, first param "shown" returns if true, second param "hidden" returns if false
  var inputDisplay = this.checked ? 'shown' : 'hidden';
  //from here, we just need to find our next input in the DOM.
  // it will always be the next element based on our HTML structure
  //change the 'display' by using our inputDisplay variable as defined above
  $(this).next('input').attr('class', inputDisplay );
});

Веселитесь.

Answer 3

Поскольку ваша заявленная цель состоит в том, чтобы уменьшить количество вводимых повторяющихся кодов, реальный ответ этой теме - получить IDE и плагин zen-coding:

http://coding.smashingmagazine.com/2009/11/21/zen-coding-a-new-way-to-write-html-code/

http://vimeo.com/7405114