jQueryでのform値設定方法(checkbox,radio,selectなど)

忘れがちなのでまとめておく

とくに checkbox, radio, select がどうだったかを忘れがち。
以下にまとめておく
(2014/03/19 Chrome 調べ)

text系 (input type=”text”, type=”hidden”, textarea など)

普通にval()を呼び出して設定する。

//例:
$('input').val('設定値')

select

普通にval()を呼び出して設定する。
ただし、multipleを設定するする場合は配列を指定する。
(multipleでなくても配列でもOK)

//例:
$('select').val('選択するoptionの値')

//例:複数の場合
$('select').val(['値1', '値2'])

checkbox, radio

val()に常に配列で設定する。
配列でない場合は、チェックされた時の値が変わってしまうため要注意

//例:
$('radio').val(['チェックを付けたいradioの値'])

//例:複数にチェックを付ける場合は複数指定
$('checkbox').val(['チェック値1', 'チェック値2'])

ちなみに

text系に配列で設定しても、ちゃんと入った。
さらに複数設定した場合はカンマでjoinされた値が入った。
あまり使用しないほうが良いと思うが。。。

//例:
$('input:text').val(['xxx'])
// => xxx が設定される

//例:
$('input:text').val(['1', '2'])
// => 1,2 が設定される

---

Written with StackEdit.