#javascript #html
#javascript #HTML
Вопрос:
У меня есть этот код внутри моего тела — я хотел бы показывать поле ввода только тогда, когда флажок установлен, а затем снова исчезать, как только флажок снят.
<input type="checkbox" name="exercheckbox">THISCHECKBOX
<!-- show this input box --> <input type="text" name="reps">
Я видел способы сделать это с помощью javascript, однако у меня нет опыта в этом языке, поэтому я не уверен, как реализовать и адаптировать этот код, чтобы он работал с моим флажком. Есть ли способ сделать это с помощью HTML? Если нет, то как бы я это сделал, используя javascript?
Комментарии:
1. Вы не можете сделать это с помощью чистого HTML. Требуемый Javascript очень тривиален, вы могли бы легко собрать его воедино, просто прочитав ответы на StackOverflow.
Ответ №1:
Вы также можете использовать чистое CSS-решение, подобное этому.
<input type="checkbox" name="exercheckbox" id="exercheckbox">THISCHECKBOX</input>
<input type="text" name="reps" id="reps" />
CSS:
#reps{
display: none;
}
#exercheckbox:checked ~ #reps{
display: block;
}
Комментарии:
1. Это перестает работать, однако, когда я добавляю метку <h3> вокруг флажка <input>, как бы мне обойти это?
2. <h3> <тип ввода= «checkbox» имя=»exercheckbox» идентификатор =»exercheckbox»><?php echo $name; ?></h3> <тип ввода = «text» имя =»reps» идентификатор =»reps»>
3. Боюсь, вы не можете сделать это таким образом, CSS проверяет наличие любых родственных элементов флажка, чтобы скрыть n показать на основе проверенного состояния. Если вы хотите сделать это точно, вам придется просто оформить флажок как h3 вместо использования тега h3. Или, по крайней мере, поместить их на один уровень.