jQueryによるフォーム部品操作のレシピ

テキストボックスやラジオボタンなどのフォーム部品は、論理モデルとしては単純なnameとvalueの組み合わせであるものの、jQueryを以ってしても画面上では統一的に扱えずに意外と苦労する。忘れがちなので纏めてみた。

フォーム部品共通

フォーム部品（のjQueryオブジェクト）を取得する

var obj = $('#target');  // id指定
var obj = $('.targets'); // class指定
var obj = $('input[@name=xxx]');  // name指定

テキストエリア、リストメニューなど同一ドキュメントで唯一なものにはユニークなidを振っておき、チェックボックスやラジオボタンなど同一のname要素で複数存在するものにはそれらで共通のclassを振っておくか、name要素で指定するのが無難か。

テキストボックス（input[@type=text]）

記入されているテキストを取得する

var str = $('#target').attr('value');
var str = $('#target').val(); // 上に同じ

テキストを設定する

$('#target').attr({ value: 'abcde' });
$('#target').val('abcde'); // 上に同じ

チェックボックス（input[@type=radio]）

指定のvalue値を持つチェックボックスがチェックされているか

// true or undefined
var flag = $('input[@name=target][@value=xxx]').attr('checked');

指定のvalue値を持つチェックボックスをチェック済みにする

$('input[@name=target][@value=xxx]').attr({ checked: "checked" });
$('input[@name=target]').val(['xxx']); // 上に同じ、必ずリストで渡す

valメソッドは同一name要素のチェックボックスについて一括で設定することができる。指定にないvalue値を持つチェックボックスについてはチェックが外れる。

$('input[@name=target]').val([1, 2, 3]);

ラジオボタン（input[@type=radio]）

選択されているラジオボタンのvalue値を取得する

var x = $('radio[@name=target]:checked').val();
// $('radio[@name=target]').val() だと先頭要素のvalue値を返すので誤り

指定のvalue値を持つラジオボタンを選択する

$('radio[@name=target][@value=xxx]').attr({ checked: "checked" });
$('radio[@name=target]').val(['xxx']); // 上に同じ、必ずリストで渡す

リストメニュー（select）

選択されているオプションのvalue値を取得する

var x = $('#target').children(':selected').val();
var x = $('#target').val(); // これだけで上に同じ

指定のvalue値を持つオプションを選択する

$('#target').children('[@value=xxx]').attr({ selected: 'selected' });
$('#target').val('xxx'); // これだけで上に同じ

オプション要素を追加する。IEでは不具合が生じる可能性があるのに注意。

$('#target').append($('<option>').val('xxx').text('xxxxxxx'));

特定のオプション要素を削除する

$("#target").children('[@value=xxx]').remove();

オプション要素を一括で削除する

$("#target").children().remove();
$("#target").empty(); // 上に同じ

複数選択リストメニュー（select[@multiple=multiple]）

選択されているオプションのvalue値を取得する

var arr = $('#target').val(); // value値は配列で返される

指定のvalue値を持つオプションを複数まとめて選択する。チェックボックスの場合と同様で指定にないvalue値を持つオプションは非選択状態となる。

$('#target').val([1, 2, 3]);

特定のオプションについて選択を解除する

$("#target").children('[@value=xxx]').removeAttr('selected');

選択を一括で解除する

$('#target').children().each(
    function(i){ $(this).removeAttr('selected') }
);

（2009-01-07追記）バージョンの記載が抜けていましたが、以上はv1.2.3で動作確認したものです。コメントでも指摘頂いてましたが、最近のバージョンでは一部がそのままでは動作しなくなったようなのでご注意を。