Частично установите флажок с помощью JavaScript

Question

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

Answer 1

HTML5 определяет логическое свойство indeterminate.

Я тестировал его только в последних версиях Safari, Chrome и Firefox. Все они поддерживают неопределенное состояние.

Пример: http://jsfiddle.net/5tpXc/

Редактировать: Обратите внимание, что это не будет работать со старыми браузерами и может не с текущими версиями IE. Вам нужно полагаться на хаки, как описано в других ответах здесь, если вы хотите поддерживать все браузеры.

Answer 2

Неа.Вам нужно будет сделать собственный графический флажок и подделать его.

Редактировать: Обратитесь к @ ответу Кассена , чтобы узнать, как частично установить флажки в HTML5-совместимомбраузеры.

Answer 3

Флажки HTML (то есть элементы input типа checkbox) не имеют третьего состояния (частично проверено). Так что нет, прямого способа сделать это нет.

То, что вам, вероятно, нужно будет сделать, это создать собственное изображение в виде флажков и привязать его к различным событиям (например, щелкнуть), чтобы сохранить его текущее «состояние» в поле формы hidden через JavaScript. Однако при таком подходе вы можете столкнуться с рядом проблем.

Например, клавиатурная навигация формы может быть невозможна для этого конкретного элемента. (Можно одну вкладку к изображению и отправить ему события клавиатуры? Я не уверен.)

Кроме того, вы можете попробовать манипулировать пользовательскими атрибутами в элементе флажка через JavaScript, чтобы сохранить третье состояние. Но рендеринг самого элемента не имеет визуального индикатора чего-то подобного. Возможно, вы могли бы манипулировать его стилем (цвет, цвет фона, цвет рамки и т. Д.), Чтобы попытаться имитировать визуальное поведение. Но вы, возможно, не сможете добиться именно того визуального стиля, который используете для справки.

Это, безусловно, интересная перспектива, и я заинтригован настолько, что я могу попытаться реализовать что-то подобное в ближайшем будущем. Но с собственным элементом флажка это невозможно. У него только два состояния.

Редактировать: См. @ kassens 'ответ для выполнения этого в HTML5. Если по какой-либо причине вы ограничены предыдущими версиями HTML, то это будет хак, как описано здесь. Но если вы можете положиться на пользователей, поддерживающих HTML5, то, похоже, встроенная поддержка есть.