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

Question

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

P.S. В конце концов эти данные будут отправлены через электронную почту с PHP.

Answer 1

в вашем 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 2

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

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

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

Answer 3

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

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

http://vimeo.com/7405114