: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 пример, так как она не будет нагружать ваш сайт лишними скрипатами, которые в целом не нужны (как я это уже показал на примерах ниже). Одно и тоже можно сделать двумя способами.
На этом все. Если у вас есть какие-либо вопросы — пишите их ниже под этой записью.
