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>
checkbox_css_in_ua"> 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 можно смело опускать благодаря возможности узнать состояние флажка, проверив его наличие/отсутствие среди отправленных полей.
./../form-result.php" method="post" target="_blank">
Мне нравится!
имя
Имя элемента управления. Это имя будет отправлено браузером агенту обработки вместе с содержимым атрибута value . Оба атрибута вместе будут соответствовать паре имя-значение, которая будет использоваться для обработки данных формы.
В настоящее время значение isindex , ранее использовавшееся особым образом некоторыми браузерами и включенное в стандарт HTML , не разрешено в этом атрибуте.
Пример
./../form-result.php" method="post" target="_blank">
Сделать мой профиль общедоступным
Глобальные атрибуты
Для получения информации о глобальных атрибутах см. этот список глобальных атрибутов в HTML 5.
События
Глобальные события
Для получения информации о глобальных событиях см. этот список глобальных событий в HTML 5.
Флажок Bootstrap
Введение
Иногда самые простые вещи могут оказаться очень важными, особенно когда они вам понадобятся. Например, как ваши посетители взаимодействуют со страницами, которые вы создаете, заявляя простое логическое действие — просто да или нет в отношении некоторых вопросов, которые вам нужно задать, как они соглашаются с условиями или выстраивают несколько возможных предпочтений.
они могли иметь. Обычно мы обходим это, не обращая особого внимания на элемент, отвечающий за такие действия, но флажок на самом деле является довольно важным элементом, без которого наши формы не могут обойтись.
В последней четвертой версии платформы Bootstrap нам предоставляются классы Состояние проверки для этих кнопок обновляется только при нажатии на кнопку. Иногда нам нужно, чтобы флажки размещались в наших формах без фактической возможности пользователя выполнить какое-либо действие, щелкнув по ним — вот где появляется отключенная опция. Каждый раз, когда вы используете флажки, оберните их все в элемент Работа Дополнительно работать с двумя элементами Флажки и переключатели по умолчанию обновляются с помощью Однако предусмотрены отключенные флажки и радио для доставки Новым в фреймворке Bootstrap версии 4 является введение так называемых настраиваемых элементов формы. Чтобы использовать настраиваемые флажки, оберните их в элемент Это почти все, что вам нужно сделать, чтобы вставить элемент флажка на ваши веб-страницы с поддержкой Bootstrap 4 и добавить к нему некую изюминку, придав ему стильный вид. .form-check и .form-check-label для отображения старого доброго элемента флажка по умолчанию и в случае, если они вам понадобятся. просто убедитесь, что вы обернули их в дополнительный .form-check . Чтобы ваши флажки правильно отображались в Bootstrap 4, вы также должны назначить .form-check-label к элементу , а сам тег должен содержать класс .form-check-input . Эффективные способы активировать флажок Bootstrap:
Чтобы правильно отключить флажок в Bootstrap 4, используя стандартный атрибут HTML отключенный атрибут , а также просто добавление его, вы также можете стилизовать курсор, когда посетитель наводит курсор на отключенный элемент, превращая его в значок «не разрешено», делая ваши формы более интуитивно понятными и удобными в работе. Если вам нравится идея и вы действительно хотите это сделать, вы должны назначить .disabled class к родительскому элементу .form-check , чтобы эффект отображался лучше всего, когда наведен курсор на весь элемент — это сделает более очевидным, что на данный момент это «недопустимо». Другой сценарий
с использованием классов Bootstrap 4 .custom-control , а также .custom-checkbox . .custom-control-input к конкретному элементу . : один с добавленным классом ., а другой с 
custom-control-indicator .custom-control-description (и поместить исходную метку внутри этого элемента) . <метка>
<тип ввода="флажок">
<промежуток>
Ботинки
Формы флажков
.form-check , единого класса для каждого типа ввода, который обновляет макет и действие их HTML-компонентов. Флажки предназначены для выбора одного или нескольких вариантов выбора, а радиостанции предназначены для выбора одной возможности из многих. не разрешенного указателя при наведении родительского , вам нужно будет добавить класс .disabled к родительскому .form-check . Кроме того, отключенный класс сделает цвет текста светлее, чтобы показать состояние ввода.
Это те же самые элементы, к которым мы привыкли по функциональности, но стилизованные гораздо более привлекательно и в стиле Bootstrap. С их помощью вы можете добавить изюминку и индивидуальность своему контенту, просто назначив несколько дополнительных классов элементам управления, которые вы включаете в свои формы. , назначив ему классы .custom-control и .custom-checkbox . При создании элемента убедитесь, что вы также добавили к нему .custom-control-input . Вы также должны использовать два элемента — один с примененным классом .custom-control-indicator , а другой — с классом .custom-control-description 9.0034 вместе с фактическим описанием, которое вам нужно будет присвоить метке вашего флажка. Выводы
