jQuery入門道場 jQueryの使い方

2章 セレクター

フォーム系フィルター

フォーム系フィルターは、フォーム系の要素をそのタイプや状態で更に絞り込む時に使います。

フォームのタイプでの選択

フォームを構成する要素は、見た目は違っても全てinput要素で、type属性が異なるだけです。(textarea、selectなど一部を除く)
つまり、、、

<input type="text" value="">
<input type="radio" value="">
<input type="checkbox" value="">

これらのtypeごとに選択するためのセレクターです。(:inputと :buttonは、少し異なります)

セレクター 対象 代替方法
:button 全ての<button>要素と<input type="button">要素 $("button, input[type='button']")
:checkbox チェックボックス [type="checkbox"]
:file ファイル選択ボックス [type="file"]
:image 画像ボタン [type="image"]
:input 全てのフォーム構成要素(input、textarea、select、button要素)  
:password パスワード入力ボックス [type="password"]
:radio ラジオボタン [type="radio"]
:reset リセットボタン [type="reset"]
:submit 送信ボタン(button要素の扱いはブラウザによって相違有り) [type="submit"]
:text テキストボックス(<input type="text">)
Ver. 1.5.2よりtype="text"の指定が無くても選択します。
(一方、[type="text"]は、選択しません)
[type="text"]

// 例
$("input:radio")...

HTML5では、type="tel"を始め、各種入力タイプがありますが、代替方法にあるような書き方で対応できます。
なお、:hiddenについては、少し他と異なるので、下の「表示・非表示でのフィルター」で見てみます。

フォームの状態での選択

以下の4つがあります。

セレクター 対象 使用例
:checked チェックボックス(checkbox)とラジオボタン(radio)のチェックが入っている状態の要素 $("input:checked")
:selected リストボックス(select+option)の選択されている状態の要素 $("select option:selected")
:disabled 利用不可なフォーム要素 $('input:disabled')
:enabled 利用可能なフォーム要素 $('input:enabled')

表示・非表示でのフィルター

要素の表示・非表示でのフィルターです。以下のものがあります。

セレクター 対象
:visible 表示状態の要素
:hidden 非表示状態の要素

ここで表示・非表示とは、その要素が画面上のスペースを取っているか否かで判断します。visibility: hiddenやopacity: 0は、visible(表示)と判断されます。

非表示状態は、以下も含みます。