Только выбранные элементы

Соответствует всем выбранным элементам формы. Это могут быть выбранные флажки (checkbox), переключатели (radio) или элементы списка (select). Если нужны именно выбранные элементы списка (select), то лучше воспользоваться селектором :selected.

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

$('.formBox input:checked')

вернет все выбранные элементы формы с классом formBox.

Содержание 1 В действии 1.1 Пример 1 1.2 Пример 2 2 Ссылки

В действии

Пример 1

Организуем вывод выделенного фрукта:

~lt~!doctype html~gt~
~lt~html lang="en"~gt~
~lt~head~gt~
  ~lt~meta charset="utf-8"~gt~
  ~lt~title~gt~checked demo~lt~/title~gt~
  ~lt~script src="/p2p/jquery-1.7.2.min.js"~gt~~lt~/script~gt~
  ~lt~style~gt~
  input, label {
    line-height: 1.5em;
  }
  ~lt~/style~gt~
~lt~/head~gt~
~lt~body~gt~
 
  ~lt~form~gt~
    ~lt~div~gt~
      ~lt~input type="radio" name="fruit" value="Апельсин" id="orange"~gt~
      ~lt~label for="orange"~gt~Апельсин~lt~/label~gt~
    ~lt~/div~gt~
    ~lt~div~gt~
      ~lt~input type="radio" name="fruit" value="Яблоко" id="apple"~gt~
      ~lt~label for="apple"~gt~Яблоко~lt~/label~gt~
    ~lt~/div~gt~
    ~lt~div~gt~
      ~lt~input type="radio" name="fruit" value="Банан" id="banana"~gt~
      ~lt~label for="banana"~gt~Банан~lt~/label~gt~
    ~lt~/div~gt~
    ~lt~div id="log"~gt~~lt~/div~gt~
  ~lt~/form~gt~
 
  ~lt~script~gt~
    $( 'input' ).on( 'click', function() {
      $( '#log' ).html( 'Был выбран ' + $( 'input:checked' ).val() );
    });
  ~lt~/script~gt~
 
~lt~/body~gt~
~lt~/html~gt~

Пример 2

Будем считать количество выбранных флажков:

~lt~!doctype html~gt~
~lt~html lang="en"~gt~
~lt~head~gt~
  ~lt~meta charset="utf-8"~gt~
  ~lt~title~gt~checked demo~lt~/title~gt~
  ~lt~script src="/p2p/jquery-1.7.2.min.js"~gt~~lt~/script~gt~
  ~lt~style~gt~
  div {
    color: red;
  }
  ~lt~/style~gt~
~lt~/head~gt~
~lt~body~gt~
 
  ~lt~form~gt~
    ~lt~p~gt~
      ~lt~input type="checkbox" name="newsletter" value="Hourly" checked="checked"~gt~
 
      ~lt~input type="checkbox" name="newsletter" value="Daily"~gt~
      ~lt~input type="checkbox" name="newsletter" value="Weekly"~gt~
 
      ~lt~input type="checkbox" name="newsletter" value="Monthly" checked~gt~
      ~lt~input type="checkbox" name="newsletter" value="Yearly"~gt~
    ~lt~/p~gt~
  ~lt~/form~gt~
  ~lt~div~gt~~lt~/div~gt~
 
  ~lt~script~gt~
    var countChecked = function() {
      var n = $( 'input:checked' ).length;
      $( 'div' ).text( n + ' выбрано!' );
    };
    countChecked();
 
    $( 'input[type=checkbox]' ).on( 'click', countChecked );
  ~lt~/script~gt~
 
~lt~/body~gt~
~lt~/html~gt~

Ссылки

• Остальные селекторы элементов формы
• Список всех селекторов
• $( ) — функция jQuery