【jQuery】フォーム部品の取得・設定まとめ

#テキスト

html

<input type="text" id="area" value="関東">

###value値取得

値取得

var area = $('#area').val();
console.log(area); //=>"関東"

###value値設定

値設定

$('#area').val('関西');

#ラジオボタン

html

<label><input type="radio" name="area" value="0" checked>関東</label>
<label><input type="radio" name="area" value="1">関西</label>

###選択されたラジオボタンのvalue値を取得
ラジオボタンが未選択の場合は、｢undefined｣になるので要注意。

選択されたラジオボタンのvalue値を取得

var area_val = $('[name=area]:checked').val();
console.log(area_val); //=>0

###選択されたラジオボタンのテキストの取得

選択されたラジオボタンのテキストの取得

var area_text = $('[name=area]:checked').parent('label').text();
console.log(area_text); //=>関東

###ラジオボタンにチェックを入れる
val()とprop()の二通りの方法がある。
attr('checked', true)は使えないので注意。

ラジオボタンにチェックを入れる（val）

//ラジオなので値が一つだが、配列で渡す必要がある。
$('[name=area]').val(['0']);

ラジオボタンにチェックを入れる（prop）

$('[name=area][value=0]').prop('checked',true);

###ラジオボタンのチェックを外す

ラジオボタンのチェックを外す

$('[name=area]').prop('checked',false);

###ラジオボタンにチェックが入っているかの判定
prop('checked')でチェックされていればtrueが、されていなければfalseが返る。

ラジオボタンにチェックが入っているかの判定

if($('[name=area]').prop('checked')){
 //チェックされていた場合
}

if(!$('[name=area]').prop('checked')){
 //チェックされていない場合
}

#チェックボックス

html

<label><input type="checkbox" class="area" value="0">関東</label>
<label><input type="checkbox" class="area" value="1">関西</label>

###チェックが入ったチェックボックスのvalue値取得
:checkedでチェックが入っているものを選択する。

関東にチェックが入っている場合

var area = $('.area:checked').val();
//=>0

ただし、val()はセレクタに合致した最初の要素のみを取得するので、該当するチェックボックスが複数の場合は、eachやmapでループさせる必要がある。

選択された値取得(map)

var area = $('.area:checked').map(function() {
  return $(this).val();
});

/*
jQueryオブジェクトが返る。
例えば、関東と関西にチェックを入れている場合は、以下が返る。
[
0: "0"
1: "1"
context: document
length: 2
prevObject: e.fn.e.init[2]
__proto__: Object[0]
]
*/

配列で取得したい場合は、ひと手間get()を最後につける。

選択された値取得(map)

var area = $('.area:checked').map(function() {
  return $(this).val();
}).get();
/*
例えば、関東と関西にチェックを入れている場合は、以下が返る。
[
0: "0"
1: "1"
]
*/

###チェックが入ったチェックボックスのテキストの取得

選択されたテキストの取得

var area = $('.area:checked').map(function() {
  return $(this).parent('label').text();
});
/*
jQueryオブジェクトが返る。
例えば、関東と関西にチェックを入れている場合は、以下が返る。

0: "関東"
1: "関西"
context: document
length: 2
prevObject: e.fn.e.init[2]
__proto__: Object[0]
*/

これも配列で取得したかったら最後にget()を追加。

###チェックを入れる
方法はvalとpropの二通りある。

チェックを入れる(val方式)

//値は配列で渡す
$('.area').val(["0","1"]);

チェックを入れる(prop方式)

$('.area').prop('checked',true);

###チェックをクリアする

チェックをクリアする

$('.area').prop('checked',false);

###チェックが入っているかの判定

prop('checked')でチェックされていればtrueが、されていなければfalseが返る。

if($('.area').prop('checked')){
 //チェックされていた場合
}

if(!$('.area').prop('checked')){
 //チェックされていない場合
}

###チェックボックスの全選択・全解除
全選択/全解除チェックボックスを変更すると、全てのチェックボックスを変更するサンプル。

html

<ul>
    <li><label><input type="checkbox" id="all" />全選択/全解除</label></li>
    <li><label><input type="checkbox" class="area" value="0" /> 関東</label></li>
    <li><label><input type="checkbox" class="area" value="1" /> 関西</label></li>
</ul>

全選択・全解除

$('#all').on('change', function() {
    $('.area').prop('checked', $(this).prop('checked'));
});

よくある全選択チェックボックス jQuery 実装

#セレクト（単一選択）

html

<select id="area">
  <option value=""></option>
  <option value="0">関東</option>
  <option value="1">関西</option>
</select>

###選択された項目(option)のvalue値取得

var area = $('#area').val();

###選択された項目(option)のテキスト取得
option:selectedをセレクタにするところがポイント。

var area = $('#area option:selected').text();

###セレクトボックスの項目(option)を選択

値設定(val)

$('#area').val(0);
//=>valueが0のオプションが選択される。

該当のoptionをセレクタにして、propでselectedを設定する方法もある。

値設定(prop)

$('#area option:[value="0"]').prop('selected',true);
//=>valueが0のオプションが選択される。

###セレクトボックスのoptionの書き換え
書き換えは、一旦削除して、追加する。
追加はappendで行うが、optionの配列を作成してからまとめてappendしたほうがコストが低いらしい。

書き換え

//削除
$('#area').empty();

//実際はdata属性から取ってくるなど
var list = {0:'東北',1:'関東'};

//optionの配列を作成
var $option = $.map(list,function(value,key){
  $('<option>'{
    value:key,
    text:value
  }
}

//新しいoptionを追加
$('#area').append($option)

参考：jQuery で select タグに option タグを追加する

###先頭を選択状態にする（クリアする）
セレクタにoption:firstを使うのがポイント。

先頭を選択状態にする

$('.area option:first').prop('selected', true);

#セレクト（複数選択）

html

<select id="area" multiple="multiple">
  <option value=""></option>
  <option value="0">関東</option>
  <option value="1">関西</option>
</select>

###選択された項目(option)のvalue値取得

値取得

var area = $('#area').val();

結果は配列で返される。
関東と関西を選択した場合、以下の形で返る。

取得結果

["0", "1"] 

###選択された項目(option)のテキスト取得

選択されたテキスト取得

$('#area option:selected').map(function(){
  return $(this).text();
});

結果はjQueryオブジェクトの配列で返る。

取得値

0: "関東"
1: "関西"
context: document
length: 2
prevObject: e.fn.e.init[2]
__proto__: Object[0]

###セレクトボックスの項目(option)を選択
配列を渡して値を設定する。｢null｣や空配列を渡すことで未選択状態にすることが可能。
値が1つの場合は、文字列でも可能。このとき、指定された値以外はチェックが外れる

値設定(val)

$('#area').val([0,1]);

prop()でも可能。
ただし、val()の時と違いこの方法では、指定された値以外はチェックがそのままとなる。

値設定(prop)

$('#area option:[value="0"]').prop('selected',true);

###先頭を選択状態にする（クリアする）

クリア(val)

$('#area').val([]);

クリア(prop)

$('#area option:first').prop('selected',true);

#textarea

html

<textarea id="area">関東</textarea>

###テキスト内容取得

値取得

var area = $('#area').val();

###値設定

値設定

$('#area').val('関西');

#参考
[jQueryにおけるフォーム値の取得と設定]
(http://jszuki.doorblog.jp/archives/31702159.html)