флажок с несколькими условиями - PullRequest
0 голосов
/ 26 октября 2018

Положение

У меня есть сетка с большим количеством информации. В начале каждой новой строки есть флажок.

Aim

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

Задача

Я могу установить и снять флажок, но я не знаю, как изменить значок только после того, как флажок уже установлен.

Давайте возьмем это в качестве примера .
В примере используется только input type="checkbox", а не вся сетка. Это было бы излишним для вопроса.

Как мне перейти от непроверенного (зеленый фон) -> отмечен 1 (красный), а затем -> отмечен 2 (случайный цвет)?

Я мог бы представить, что это простая и нубистская задача, но я вроде как с этим борюсь.

Ответы [ 3 ]

0 голосов
/ 26 октября 2018

Раствор

Спасибо Мако за решение .

С помощью третьего атрибута с именем undeterminate вы можете применить визуальное третье условие к вашему флажку. Однако неопределенное состояние может быть применено только через JavaScript, а не через HTML.

Дополнительную информацию можно найти по предоставленной ссылке.

0 голосов
/ 26 октября 2018

Вы можете использовать селектор псевдокласса :indeterminate CSS для стилизации вашего флажка, пока он был в неопределенном состоянии, как вы и просили.

Ссылка: https://tympanus.net/codrops/css_reference/indeterminate/

0 голосов
/ 26 октября 2018

Во-первых, вы должны создать собственный флажок, обратитесь к следующей странице Как создать пользовательский флажок

Затем добавьте свой пользовательский js в этот флажок. Надеюсь, что эта помощь

...