Почему не работает checked?
Хочу чтобы при нажатии на инпут где есть выбора да или нет появлялась ниже форма, но почему то нет
<section class="ds"> <div class="infomation"> <div class="infomation-container"> <h2>Информация о найденом животном</h2> <div class="infomation-container_content"> <div class="infomation-container_content-first"> <div class="infomation-container_content-first__text"> <form> <ol> <li>Номер: <input type="text"></li> <li>E-mail: <input type="email"></li> <li><p>Загестрироваться</p><label for="hider">Да</label><input id="hider" type="checkbox">/ нет <input type="checkbox"></li> <li>Вид животного: <input type="text"></li> <li>Описание животного: <textarea cols="30" rows="10"></textarea></li> <li>Клеймо: <select> <option value="да">да</option> <option value="нет">нет</option> </select></li> <li>Район: <input type="text"></li> <li>Нашли: <input type="date"></li> </ol> </form> </div> <!--Форма которая должна появиться--> <div class="infomation-container_content__two"> <div class="form"> <div class="form-container"> <form> <h2>Регистрация</h2> <label> <p>Имя</p> <input type="text"> </label> <label> <p>Фамилия</p> <input type="text"> </label> <label> <p>Телефон</p> <input type="number"> </label> <label> <p>Пароль</p> <input type="password"> </label> <label> <p>Повтор пароля</p> <input type="password"> </label> <div class="form-container__buttons"> <div class="form-container__buttons-button"> <button type="submit">Зарегистрироваться</button> </div> </div> </form> </div> </div> </div> </div> </div> </div> </div> </section> |
<section class="ds"> <div class="infomation"> <div class="infomation-container"> <h2>Информация о найденом животном</h2> <div class="infomation-container_content"> <div class="infomation-container_content-first"> <div class="infomation-container_content-first__text"> <form> <ol> <li>Номер: <input type="text"></li> <li>E-mail: <input type="email"></li> <li><p>Загестрироваться</p><label for="hider">Да</label><input id="hider" type="checkbox">/ нет <input type="checkbox"></li> <li>Вид животного: <input type="text"></li> <li>Описание животного: <textarea cols="30" rows="10"></textarea></li> <li>Клеймо: <select> <option value="да">да</option> <option value="нет">нет</option> </select></li> <li>Район: <input type="text"></li> <li>Нашли: <input type="date"></li> </ol> </form> </div> <!--Форма которая должна появиться--> <div class="infomation-container_content__two"> <div class="form"> <div class="form-container"> <form> <h2>Регистрация</h2> <label> <p>Имя</p> <input type="text"> </label> <label> <p>Фамилия</p> <input type="text"> </label> <label> <p>Телефон</p> <input type="number"> </label> <label> <p>Пароль</p> <input type="password"> </label> <label> <p>Повтор пароля</p> <input type="password"> </label> <div class="form-container__buttons"> <div class="form-container__buttons-button"> <button type="submit">Зарегистрироваться</button> </div> </div> </form> </div> </div> </div> </div> </div> </div> </div> </section>
.infomation-container_content__two { margin-top: 100px; display: none; } #hider:checked+ .infomatin-container_content__two { display: block; } |
.infomation-container_content__two { margin-top: 100px; display: none; } #hider:checked+ .infomatin-container_content__two { display: block; }
Дополнительно:
checked работает, а вот как работают комбинированные селекторы (в частности +) надо подучить
https://doka.guide/css/combined-selectors/
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>Document</title> </head> <body> <label for="hider">click</label> <input type="checkbox" id="hider"> <div > <form > <input type="text"> <button type="submit"></button> </form> </div> </body> </html> |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>Document</title> </head> <body> <label for="hider">click</label> <input type="checkbox" id="hider"> <div > <form > <input type="text"> <button type="submit"></button> </form> </div> </body> </html>
div { display: none; } #hider:checked+ div { display: block; } |
div { display: none; } #hider:checked+ div { display: block; }
Используйте :has
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Проблема с атрибутом checked может возникать по нескольким причинам. Вот несколько возможных причин и способы их решения:
1. Неправильное использование атрибута checked: Убедитесь, что атрибут checked установлен в теге input с правильным значением. Например, для чекбокса значение атрибута должно быть "checked", а для радиокнопки - "checked".
2. Проблемы с JavaScript: Если вы используете JavaScript для установки или удаления атрибута checked, убедитесь, что ваш код правильно обрабатывает эту логику. Возможно, вы случайно удалили атрибут или не правильно установили его значение.
3. Проблемы с серверной стороной: Если вы генерируете HTML с помощью серверного кода (например, PHP), убедитесь, что правильно устанавливаете атрибут checked в соответствии с вашей логикой.
Пример кода на PHP для установки атрибута checked:
<input type="checkbox" name="myCheckbox" >
Где $isChecked - это переменная, определяющая, должен ли быть чекбокс отмечен.
Если после проверки всех этих причин проблема с атрибутом checked все еще остается, попробуйте использовать инструменты разработчика вашего браузера для отладки и проверки, какие стили или скрипты могут переопределять или изменять значение атрибута checked.