Есть ли способ использовать Javascript и HTML (5), чтобы сделать флажок частично выбранным, например, флажки в меню установки программы, когда вы выбираете только некоторые из дополнительных опций?
Частично выберите флажок с javascript
Ответ 1
HTML5 определяет свойство indeterminate
boolean.
Я тестировал его только в последних версиях Safari, Chrome и Firefox. Все они поддерживают неопределенное состояние.
Пример: http://jsfiddle.net/5tpXc/
Изменить: Обратите внимание, что это не работает со старыми браузерами и, возможно, не с текущими версиями IE. Вам нужно будет полагаться на хаки, как описано в других ответах здесь, если вы хотите поддерживать все браузеры.
Ответ 2
Неа. Вам нужно будет создать собственную графику и подделать ее.
Изменить: Обратитесь к @Kassen answer, чтобы частично установить флажки в браузерах, совместимых с HTML5.
Ответ 3
HTML-флажки (то есть input
элементы типа checkbox
) не имеют третьего состояния (частично проверено). Нет, нет прямого способа сделать это.
То, что вам, вероятно, нужно сделать, это создать пользовательский образ, отображающий флажок, и привязать его к различным событиям (нажмите, например), чтобы сохранить свое текущее "состояние" в поле формы hidden
через JavaScript. Однако вы можете столкнуться с рядом проблем с этим подходом.
Например, клавиатурная навигация формы может быть невозможна для этого конкретного элемента. (Может ли одна вкладка на изображение и отправлять ей события клавиатуры? Я не уверен.)
Кроме того, вы можете попробовать манипулировать настраиваемыми атрибутами элемента checkbox через JavaScript для хранения третьего состояния. Но рендеринг самого элемента не имеет визуального индикатора чего-то подобного. Возможно, вы можете манипулировать своим стилем (цвет, цвет фона, цвет границы и т.д.), Чтобы попытаться имитировать визуальное поведение. Но вы не сможете достичь точного визуального стиля, который вы используете для справки.
Это, безусловно, интересная перспектива, и я достаточно заинтригован, что в ближайшем будущем я могу попытаться реализовать что-то подобное. Но с помощью собственного элемента checkbox это невозможно. Он имеет только два состояния.
Изменить: Обратитесь к @kassens ' для этого в HTML5. Если по какой-либо причине вы ограничены предыдущими версиями HTML, тогда это будет хак, как описано здесь. Но если вы можете полагаться на пользователей, поддерживающих HTML5, то похоже, что существует встроенная поддержка.