:checked псевдокласс — что это такое и как им пользоваться ?

· HTML & CSS, jQuery и JavaScript и Блог · 2 мин чтения

:checked — это псевдокласс, который используется для определения состояния radio(<input type="radio">), checkbox (<input type="checkbox">) или option (<option> в <select></select>). Например, если вы поставили галочку в checkbox поле, то :checkbox поможет определить это. Ниже я покажу несколько примеров использования этого псевдокласса.

CSS пример

Для этого примера я возьму input типа checkbox (<input type="checkbox">) и если на нем будет стоять галочка, то я сделаю небольшой отступ слева (чтобы была видна разница между обычным checkbox’ом и выделенным. Живой пример смотрите ниже. Под примером я немного распишу как все это работает.

See the Pen GZPewv by Alexander (@bologer) on CodePen.dark

Если посмотреть на пример выше, то при нажатии на любой checkbox он на 10 пикселей двигается в правую сторону. Все это делается с помощью псевдокласса :checked. А если быть точнее, то именно вот эта часть CSS заставляет checkbox отодвигаться вправо:

input[type="checkbox"]:checked {
  margin-left: 10px;
}

На первой строке я выбираю все поля формы с типом checkbox (input[type="checkbox"]) и далее приписываем :checked псевдокласс.

Тоже самое делается для radio и option элементов. Разницы лишь в том, что для radio я сделал отступ 20 пикселей при :checked, а для option:checked я сделал выделение красным цветом.

jQuery пример

Если псевдокласс :checked можно использовать вCSS, то почему бы не попробовать в jQuery?

В примере ниже показан точно такой же пример как и в CSS секции. Разницы лишь в том, что в этой секции все полностью работает на jQuery, никакого CSS.

See the Pen EKGMza by Alexander (@bologer) on CodePen.dark

Ранее я уже описывал работу :checked псевдокласса в jQuery в записи «Проверка checkbox на наличие галочки с jQuery«.

Ресурсы для дальнейшего изучения

Послесловие

Вывод: я советую использовать CSS пример, так как она не будет нагружать ваш сайт лишними скрипатами, которые в целом не нужны (как я это уже показал на примерах ниже). Одно и тоже можно сделать двумя способами.

На этом все. Если у вас есть какие-либо вопросы — пишите их ниже под этой записью.

Комментарии