HTML属性を取得するattr()ではチェックなどの動的な動作に対応していなかったり、フォーム周りで上手く取得できないことも多かったため、フォームのプロパティを取得したり設定するために、jQuery 1.6よりprop()が追加されました。
checkeddisabledselectedなどのプロパティはprop()で操作するようにしましょう。
目次
プロパティの取得
まずはプロパティの状態を取得してみましょう。
構文
jQuery
|
1 |
$('input[type="checkbox"]').prop('checked'); |
上記の例では、チェックボックスのcheckedプロパティの状態を取得しています。
返り値は以下のようになります。
返り値
- チェックあり =>
true - チェックなし =>
false
checkedが付いていたらtrue、なければfalseが返されます。
attr()の場合はchekedが付いていなければundefined（未定義）が返され、チェックが外れているだけなのか、それともチェックボックスがそもそもないのかを区別できません。
その辺も区別されるprop()を使うべきですね。
チェックボックスの状態をテキストに出力するサンプル
それではprop()を使って、実際にチェックボックスの状態をHTMLに表示させてみましょう。
HTML
|
1 2 3 4 |
<input type="checkbox" checked="checked">同意する<br> <!--出力用--> <p></p> |
jQuery
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
$(function() { //チェックボックスをチェックしたら発動 $('input[type="checkbox"]').change(function() { //prop()でチェックの状態を取得し変数に格納 var prop = $(this).prop('checked'); //上記で取得した変数をテキストに出力 $('p').text(prop); }); }); |
結果（動作サンプル）
チェックを入れたり外したりするたびに、trueかfalseが表示されるかと思います。
同意する
prop()だとチェックの状態も簡単に取得できますね。
参考
ファイル情報を取得してテキストに出力するサンプル
prop()はHTML5のFile apiに対応したブラウザであれば、アップロードフォームで選択したローカルファイルの情報も取得できます。
ファイル名や、ファイルサイズ、画像のプレビューなども可能です。
HTML
|
1 2 3 4 |
<input type="file" name="file"> <button>クリック</button> <!--出力用--> <p></p> |
jQuery
|
1 2 3 4 5 6 7 8 9 10 11 12 |
$(function() { //ボタンをクリックしたら発動 $('button').click(function() { //選択したファイル情報を取得し変数に格納 var file = $('input[type="file"]').prop('files')[0]; //ファイル情報をテキストで出力 $('p').html('ファイル名：'+file.name+'<br>ファイルサイズ：'+file.size+'バイト<br>ファイルタイプ：'+file.type); }); }); |
結果（動作サンプル）
ローカルファイルを選択しボタンをクリックすると、ファイルの情報が出力されるかと思います。
アップロードフォームをセレクタに指定し、prop()でfilesプロパティを取得しています。
最後の[0]は最初のファイルという意味です。
もし複数選択するフォームで、2個目のファイルを指定したい場合は[1]という風に指定します。
他にもdisabledの状態を取得するサンプルも以下のページでご紹介しています。
参考：disabledの判定
プロパティの設定
HTMLのフォーム要素にプロパティを設定するときもprop()を使います。
構文
jQuery
|
1 |
$('input[type="checkbox"]').prop('checked', true); |
prop()の第二引数にtrueを設定することで、プロパティを設定できます。
上記で説明したように、chekedやdisabledといったプロパティはattr()では上手く動作しません。
prop()を使うようにしましょう。
ボタンをクリックするとチェックされるサンプル
それではprop()を使って、クリックしたボタンに対応したラジオボタンにチェックを入れてみましょう。
HTML
|
1 2 3 4 5 |
<input type="radio" name="gender" value="male" id="male_chk">男性 <input type="radio" name="gender" value="female" id="female_chk">女性 <button id="male">男性にチェック</button> <button id="female">女性にチェック</button> |
jQuery
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
$(function() { //男性のボタンをクリックしたら発動 $('#male').click(function() { //男性のラジオボタンにチェック $('#male_chk').prop('checked', true); }); //女性のボタンをクリックしたら発動 $('#female').click(function() { //女性のラジオボタンにチェック $('#female_chk').prop('checked', true); }); }); |
結果（動作サンプル）
それぞれの性別ボタンをクリックすると、それに対応したラジオボタンにチェックが入るかと思います。
男性 女性
name属性を同じにしないと、両方ともにチェックが入ってしまうので注意しましょう。
ちなみにclassを設定する場合は以下のaddClass()を使います。
他にもdisabledを設定するサンプルも以下のページでご紹介しています。
参考：disabledの設定
プロパティの解除
HTMLのフォーム要素に設定してあるプロパティを解除する場合もprop()を使います。
構文
jQuery
|
1 |
$('input[type="checkbox"]').prop('checked', false); |
prop()の第二引数にfalseを設定することで、プロパティを解除できます。
removeProp()というプロパティを削除するメソッドもありますが、削除してしまうのは好ましくないため、prop()での処理が推奨されています。
ボタンをクリックするとチェックを外すサンプル
それではprop()を使って、ラジオボタンのチェックを外してみましょう。
HTML
|
1 2 3 4 |
<input type="radio" name="gender" value="male" id="male_chk">男性 <input type="radio" name="gender" value="female" id="female_chk">女性 <button>チェックを外す</button> |
jQuery
|
1 2 3 4 5 6 7 8 9 10 |
$(function() { //ボタンをクリックしたら発動 $('button').click(function() { //ラジオボタンのチェックを外す $('input[type="radio"]').prop('checked', false); }); }); |
結果（動作サンプル）
ボタンをクリックするとラジオボタンのチェックが外れるかと思います。
男性 女性
ちなみにclassを削除する場合は以下のremoveClass()を使います。
他にもdisabledを解除するサンプルも以下のページでご紹介しています。
参考：disabledの解除
