デザイナーにも分かりやすいjQuery入門講座|jQueryの使い方

このエントリーをはてなブックマークに追加
索引
Core:コアとなる仕組み
Selectors:セレクタ
Attributes:属性
Traversing:対象の変更
Manipulation:操作
CSS:スタイルシート
Events:イベント
Effects:演出効果
Ajax:xml等との連携
Utilities:ユーティリティ
Data:データ
Miscellaneous:諸々
Deferred:処理管理
Callbacks:コールバック
Internals:内部処理

:checkedチェックされた要素を選択

構文

チェックされた要素(チェックボックス/ラジオボタン)を選択
$(":checked")ver1.0〜
※:(コロン)を忘れないように注意しましょう

機能

:(コロン)に続けてcheckedを設定するとチェックされた要素を選択します。チェックボックスだけでなくラジオボタンのチェックも選択されます。

混同しやすいものに:selectedがあります。こちらはselect要素で選択されているoption要素を取得する時に利用します。

解説

チェックされた要素を選択

サンプル(checked/01.html)を開いてbody内の構成を確認してください。チェックボックスとラジオボタンのセットが記述されており、各セットのうち1つだけチェックが入っています。

チェックボックス:
<label><input name="checkBox" type="checkbox" />checkbox A</label>
<label><input name="checkBox" type="checkbox" />checkbox B</label>
<label><input name="checkBox" type="checkbox" checked="checked" />checkbox C</label>
ラジオボタン:
<label><input name="radioButton" type="radio" checked="checked" />radio button A</label>
<label><input name="radioButton" type="radio" />radio button B</label>
<label><input name="radioButton" type="radio" />radio button C</label>

jQueryは以下の様に記述され、buttonをクリックするとチェックされた要素を選択しparentメソッドを利用して親要素のlabelを選択します(チェックボックスやラジオボタン自体にはボーダーを設定できないため代わりにlabelを選択します)。そして選択したlabel要素にcssメソッドを利用して赤枠を付けます。

$("button").click(function(){
	$(":checked").parent().css("border","3px solid red");
});

このサンプルでは:checkedの選択しか行っていないので、別の値ラジオボタンをクリックしても赤枠が消えることはありません。選択に合わせて赤枠を移動させるサンプルは次項で紹介します。

選択に合わせて赤枠を移動

サンプル(checked/02.html)を開いてbody内にラジオボタンが1セットあることを確認してください。

<label><input name="radioButton" type="radio" />radio button A</label>
<label><input name="radioButton" type="radio" />radio button B</label>
<label><input name="radioButton" type="radio" />radio button C</label>

jQueryは以下の様になっており、inputタグがクリックされたらチェックが入っている要素の親要素(label)を赤枠で囲みます。続いて:notを利用して選択されていない要素は赤枠を消しています。

$("input").click(function(){
	$("input:checked").parent().css("border","3px solid red");
	$("input:not(':checked')").parent().css("border","0px");
})

結果として、クリックでチェックされる要素が変わるたびに、チェックされた要素に赤枠が付くようになります。

関連項目

select要素で選択されているoption要素を取得したい場合は:selectedを利用します。
changeイベントを利用すれば、チェックが変更された時の処理を設定することができます。