# Селектор checked

Селектор `:checked` выбирает элементы, которые выбраны, то есть те, которые имеют атрибуты `checked` или `selected`. Селектор `:checked` работает с чекбоксами (`checkbox`) и радио переключателями (`radio`), а также для элементов с тегом `option`. Чтобы получить только выбранные опции элементов `select`, используйте селектор `selected`.

## Синтаксис

Так мы выбираем элементы с атрибутом `checked`:

`$(':checked');`

## Пример

Давайте, при каждом выборе чекбокса, отображать количество выбранных чекбоксов. Как вы видите до вашего первого клика будут отображены чекбоксы, выбранные по умолчанию, это второй и четвёртый:

`<form> <p> <input type="checkbox" name="cbox" value="one"> <input type="checkbox" name="cbox" value="two" checked="checked"> <input type="checkbox" name="cbox" value="three"> <input type="checkbox" name="cbox" value="four" checked> <input type="checkbox" name="cbox" value="five"> </p> </form> <div></div>` `div { color: green; }` `let countChecked = function() { let n = $('input:checked').length; $('div').text('Checked: ' + n); }; countChecked(); $('input[type=checkbox]').on('click', countChecked);`

## Пример

Давайте по клику отображать внизу значение каждого выбранного радио переключателя:

`<form> <div> <input type="radio" name="digits" value="one" id="one"> <label for="one">one</label> </div> <div> <input type="radio" name="digits" value="two" id="two"> <label for="two">two</label> </div> <div> <input type="radio" name="digits" value="three" id="three"> <label for="three">three</label> </div> <div id="text"></div> </form>` `input, label { line-height: 1.5em; }` `$('input').on('click', function() { $('#text').html($('input:checked').val() + ' is checked!'); });`

## Смотрите также

- метод `filter`,
  который фильтрует элементы в наборе по заданному селектору
- атрибут `selected`
- селектор `selected`,
  который выбирает элементы, которые выбраны, то есть те, которые имеют атрибут `selected`
- теги `option`, `select`, `checkbox`
  и `radio`

← →
↑