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

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

:checkboxチェックボックスを選択

構文

チェックボックス(type属性がcheckboxの要素)を選択
$(":checkbox")ver1.0〜
※:(コロン)を忘れないように注意しましょう

機能

:(コロン)に続けてcheckboxを設定するとチェックボックス(type属性がcheckboxの要素)を選択します。
新しいブラウザでは[属性名='値']を利用してinput[type='checkbox']としたほうが高速なため、現在では非推奨のセレクタとなっています(解説の最後に推奨される書き方を紹介しています)。

解説

チェックボックスを選択します

サンプル(checkbox/01.html)を開いてbody内の構成を確認してください。フォーム関連の要素が一通り記述されています。checkbox要素自身にはcssでボーダーを設定することができないので、ボーダーを付けるため以下の様にcheckbox要素をspanタグで囲んでいます。

<span><input type="checkbox" /></span>

jQueryは以下の様に記述され、ブラウザ内をクリックするとチェックボックスを選択しparentメソッドを利用して親要素のspanを選択します。そして選択したspan要素にcssメソッドを利用して赤枠を付けます。

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

結果として、ブラウザ内をクリックするとチェックボックス(の外側にあるspan要素)に赤枠が付きます。

チェックを入れる

サンプル(checkbox/02.html)を開いてbody内の構成を確認してください。このサンプルではボーダーは付けないのでチェックボックスをspan要素で囲んでいません。jQueryは以下の様に記述され、ブラウザ内をクリックするとチェックボックスにpropメソッドを利用してチェックを入れます。

$(document).click(function(){
	$(":checkbox").prop("checked",true);
});

結果として、ブラウザ内をクリックするとチェックボックスにチェックが入ります。

推奨される書き方

新しいブラウザでは[属性名='値']を利用してinput[type='checkbox']としたほうが高速です。
サンプル(checkbox/03.html)を開いてbody内の構成がcheckbox/02.htmlと同じ事を確認してください。jQueryもほとんど同じで、セレクタが以下の様に変更されているだけです。

$(document).click(function(){
	$("input[type='checkbox']").prop("checked",true);
});

結果としてcheckbox/02.htmlとまったく同じになり、ブラウザ内をクリックするとチェックボックスにチェックが入ります。