html — При нажатии checkbox input не срабатывает правило
Задать вопрос
Вопрос задан
Изменён 1 год 9 месяцев назад
Просмотрен 322 раза
Создал кастомный чекбокс, чтобы при его нажатии появлялся другой блок. Для появляющегося блока выставлено значение opacity: 0. При нажатии на чекбокс прописал правило чтоб блок сделал opacity: 1. Но он не работает. В чем проблема?
.disk-count {
border: 1px solid #f1f1f7;
display: flex;
align-items: center;
width: auto;
border-radius: 2px;
padding: 6px;
max-height: 32px;
margin-left: 25px;
opacity: 0;
}
input[name="disk-1"] ~ .disk-count {
opacity: 1;
transition: 0.![]()
25s;
}
.disk-checkbox {
/* display: block; */
display: flex;
align-items: center;
position: relative;
padding-left: 35px;
cursor: pointer;
} <div>
<label>
<p>20000 МБ</p>
<input type="checkbox" checked="checked" name="disk-1" />
<span></span>
</label>
<div>
<button>-</button>
<input type="text" value="1" />
<button>+</button>
</div>
</div>- html
- css
- input
Чтобы селектор ~ сработал, элементы должны стоять рядом и на одном уровне вложенности.
.disk-count {
border: 1px solid #f1f1f7;
display: flex;
align-items: center;
width: auto;
border-radius: 2px;
padding: 6px;
max-height: 32px;
margin-left: 25px;
opacity: 0;
}
input[name="disk-1"]:checked ~ .disk-count {
opacity: 1;
transition: .25s opacity;
}
.disk-checkbox {
padding-left: 25px;
cursor: pointer;
}<div>
<span>20000 МБ</span>
<input type="checkbox" name="disk-1">
<span></span>
<div>
<button>-</button>
<input type="text" value="1">
<button>+</button>
</div>
</div>
Зарегистрируйтесь или войдите
Регистрация через Facebook
Регистрация через почту
Отправить без регистрации
Почта
Необходима, но никому не показывается
Отправить без регистрации
Почта
Необходима, но никому не показывается
checked атрибут HTML теґа input
- Головна
- html
- теґи
- <input>
- checked
Атрибут checked (HTML тегу <input>) є логічним атрибутом і вказує на те, що елемент повинен бути попередньо вибраний при завантаженні сторінки (застосовується тільки для <input type = "checkbox"> і <input type = "radio">, в іншому випадку він ігнорується).
Атрибут ‘checked’ також може бути встановлений після завантаження сторінки, за допомогою JavaScript.
| Нотатка: | У разі використання перемикачів (radiobutton) може бути відзначений тільки один елемент групи, для прапорців (checkbox) можливо помітити всі елементи. |
| Порада: | Виправте помилку «Бе» на «Без» на картинці. |
| Нотатка: | Без задання цей атрибут вимкнений. |
Запропонувати свою пораду чи нотатку
ПорадаНотатка
Синтакс
<input type="radio" checked> <input type="checkbox" checked>
Атрибут checked не має жодного значення :
Переглядачі
- Стаціонарні переглядачі
- Мобільні переглядачі
| Переглядач | ||||||
|---|---|---|---|---|---|---|
1+ | 1+ |
1+ |
4+ |
3+ |
12+ |
| Переглядач | ||||
|---|---|---|---|---|
1+ |
1+ |
1+ |
1+ |
Приклади
- Приклад 1
Найпростіший приклад використання HTML атрибута checked теґа <input>
See the Pen Input.checkbox_css_in_ua by css.in.ua (@css_in_ua) on CodePen.
Різниця між HTML 4.01 та HTML5
Різниця між XHTML та HTML
Немає жодної різниці.
ввод (тип = флажок) элемент
Если вы не знаете, что такое элемент или как вы должны его использовать, я рекомендую вам прочитать учебник « Теги и атрибуты HTML », который вы можете найти в разделе руководств HTML .
Содержание
- 01Описание
- 02Примеры
- 03Атрибуты
- Специальные атрибуты
- Глобальные атрибуты
- 04События
- Глобальные события
Описание
Элемент input , имеющий значение «флажок» в атрибуте типа , представляет собой элемент управления с двумя состояниями, который позволяет пользователям помечать его как выбранный или невыбранный.
Этот элемент управления может использоваться для сбора информации, отвечающей на простые вопросы «верно/неверно», например «вы хотите/принимаете/отклоняете это?».
Состояние элемента управления флажком определяется наличием логического атрибута checked (если он присутствует, флажок установлен). Но когда форма отправляется, агенту обработки отправляется не проверенное состояние, а пара имя/значение. При отправке состояние флажка определяет, следует ли отправлять значение элемента управления вместе с формой. Другими словами, элемент управления отправляется только в том случае, если он проверен.
В отличие от радиокнопок, которые соответствуют группам, в которых одновременно может быть отмечен только один параметр, элементы управления флажками независимы.
Примеры
В нашем первом примере показан список основных интересов, в котором пользователь может отметить любые варианты, которыми ему нравится заниматься в свободное время.
Здесь мы будем использовать атрибут
При работе с флажками атрибут value можно смело опускать благодаря возможности узнать состояние флажка, проверив его наличие/отсутствие среди отправленных полей.