Подтвердить что ты не робот

Частично выберите флажок с javascript

Есть ли способ использовать Javascript и HTML (5), чтобы сделать флажок частично выбранным, например, флажки в меню установки программы, когда вы выбираете только некоторые из дополнительных опций?

4b9b3361

Ответ 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, то похоже, что существует встроенная поддержка.