jQuery селектор :checked

Определение и применение

Селектор :checked выбирает отмеченные в данный момент флажки и радиокнопки, а также выбранные элементы <option>. Он проверяет текущее состояние checked или selected, которое после действий пользователя может отличаться от исходного HTML-атрибута.

jQuery синтаксис:

JavaScript

$(":checked")

Добавлен в версии jQuery

1.0

Селектор в CSS

Это селектор jQuery, он не является частью спецификации CSS.

Пример использования

Селектор :checked — пример 1

Нажмите ▶. Измените JavaScript и запустите пример повторно. Используется jQuery 3.1.1.

index.html

HTML

<form>
  <label>Мужчина <input type="radio" name="sex" value="male" checked="" /></label>
  <!-- значение выбрано -->
  <label>Женщина <input type="radio" name="sex" value="female" /></label><br /><br />
  <label><input type="checkbox" name="type1" value="busy" checked="" />Женат / замужем</label><br /><br />
  <!-- значение выбрано -->
  <label><input type="checkbox" name="type2" value="free" />Холост / -а</label><br /><br />
  <label><input type="checkbox" name="type3" value="childfree" checked="" />Дети</label><br /><br />
  <!-- значение выбрано -->
  <select name="cars" multiple="">
    <!--раскрывающийся список в котором может быть выбрано несколько значений (атрибут multiple) -->
    <option value="Opel" selected="">Opel</option>
    <!-- параметр должен быть предварительно выбран при загрузке (атрибут selected) -->
    <option value="Volvo">Volvo</option>
    <option value="BMW">BMW</option>
    <option value="Mercedes">Mercedes</option>
  </select>
</form>

main.js

JavaScript

$(document).ready(function () {
    $(':checked').css('box-shadow', '0 0 10px red') // выбираем все элементы, которые предварительно выбраны в нашем примере
})

style.css

CSS

body {
  margin: 16px;
  font:
    16px/1.5 system-ui,
    sans-serif;
  overflow-wrap: anywhere;
}
img,
input,
select,
textarea,
button {
  max-width: 100%;
}

В этом примере с использованием селектора :checked мы выбрали и стилизовали все элементы <input>, у которых установлен логический атрибут checked, и элемент <option> (пункт раскрывающегося списка <select>) с логическим атрибутом selected.