LOGO JQuery
Фильтры Форм

Фильтры элементов форм

:button

Соответствует элементам, которые являются кнопками: input-элементы с типом button или button-элементы.

Найдем кнопки на странице и выделим их красной рамкой и желтым фоном:
$(':button')
  .css({background: 'yellow', border: '3px red solid'});
Откройте пример в новом окне и посмотрите исходный код

:radio

Соответствует элементам, которые являются переключателями (input-элементы с типом radio).

Найдем переключатели на странице и будем поочередно скрывать и показывать их:
function rnd(){
  $("input:radio")
    .fadeToggle(1000,'swing',rnd); 
}
rnd();
Откройте пример в новом окне и посмотрите исходный код

:checkbox

Соответствует элементам, которые являются флажками (input-элементы с типом checkbox).

Найдем флажки на странице и будем поочередно скрывать и показывать их:
function rnd(){
  $('input:checkbox')
    .fadeToggle(1000, 'swing', rnd); 
}
rnd();
Откройте пример в новом окне и посмотрите исходный код

:text

Соответствует элементам, которые являются текстовыми полями (input-элементы с типом text).

Найдем текстовые поля на странице и выделим их красной рамкой:
$("input:text").css("border", "2px red solid");
Откройте пример в новом окне и посмотрите исходный код

:password

Соответствует элементам, которые являются полями для ввода пароля (input-элементы с типом password).

Найдем поля для ввода пароля на странице и выделим их красной рамкой:
$("input:password")
  .css("border", "2px red solid");
Откройте пример в новом окне и посмотрите исходный код

:file

Соответствует элементам, которые являются полями для загрузки файлов (input-элементы с типом file).

Найдем поля для загрузки файлов на странице и выделим их красной рамкой:
$('input:file').css('border', '2px red solid');
Откройте пример в новом окне и посмотрите исходный код

:submit

Соответствует кнопкам, которые отправляют данные формы на сервер: input-элементы с типом submit и button-элементы с типом submit.

Найдем кнопки для загрузки файлов на странице и выделим их красной рамкой:
$(":submit").css("border", "2px red solid");
Откройте пример в новом окне и посмотрите исходный код

:reset

Соответствует кнопкам, которые сбрасывают введенные в формы данные: input-элементы с типом reset.

Найдем кнопки для сброса введенных в формы данных и выделим их красной рамкой:
$("input:reset").css("border", "2px red solid");
Откройте пример в новом окне и посмотрите исходный код

:image

Соответствует элементам с изображениями, при нажатии на которые происходит отправка данных формы на сервер (input-элементы с типом image).

Найдем элементы типа image и выделим их красной рамкой:
$('input:image')
  .css('border', '2px red solid');
Откройте пример в новом окне и посмотрите исходный код

:input

Соответствует всем элементам формы (элементы, представленные тегами input, textarea, select или button).
// сузим круг поиска элементов до всех элементов с классом some-hint
// и уже среди них найдем элементы формы
$( '.some-hint' ).filter( ':input' );

:selected

Соответствует всем элементам со статусом selected.
Это могут быть выбранные элементы типа <option>.
Для поиска выбранных checkbox и radio элементов, этот селектор НЕ подойдет.
// не самый быстрый вариант
$( '.some-hint:selected' );

// эффективнее будет
$( '.some-hint' ).filter(':selected');
$( "select" )
  .change(function() {
    var str = "";
    $( "select option:selected" ).each(function() {
      str += $( this ).text() + " ";
    });
    $( "div" ).text( str );
  })
  .trigger( "change" );
Откройте пример в новом окне и посмотрите исходный код

:focus

Соответствует всем элементам формы, находящимся в фокусе (в один момент времени, в фокусе может находиться только один или ни одного элемента на странице).

:checked

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

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

Организуем вывод выделенного фрукта:
 $( 'input' ).click( function() {
      $( '#log' ).html( 'Был выбран ' + $( 'input:checked' ).val() );
});
Откройте пример в новом окне и посмотрите исходный код

:enabled

Соответствует всем активным (незаблокированным от пользователя) элементам формы (элементы без атрибута disabled).

:disabled

Соответствует всем заблокированным элементам формы (элементы с атрибутом disabled).

Найдем все не заблокированные элементы и поместим туда текст о текущем состоянии:
$( "input:enabled" ).val( "Не задизейблино" );
Откройте пример в новом окне и посмотрите исходный код


Найдем все заблокированные элементы и поместим туда текст о текущем состоянии:
$( "input:disabled" ).val( "Задизейблино" );
Откройте пример в новом окне и посмотрите исходный код