【jQuery】取得･設定まとめ - Qiita

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

値取得

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

値設定

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

選択された値取得

ラジオボタンが未選択の場合は、｢undefined｣になるので要注意。

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

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

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

選択する

val()とpropの二通りの方法がある。

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

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

選択した値のクリア

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

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

選択された値取得

val()はセレクタに合致した最初の要素のみを取得するので、複数選択されるチェックボックスでは、eachや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()を最後につける。

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の二通りある。

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

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

選択した値のクリア

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

全選択・全解除

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

<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.checked);
});

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

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

選択されたoptionのvalue値取得

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

選択されたテキスト取得

option:selectedをセレクタにするところがポイント。

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

セレクトボックスのoptionを選択

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

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

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

セレクトボックスのoptionの書き換え

書き換えは、一旦削除して、追加する。

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

//新しいoptionを追加
$('#area').append(
  $('<option>').val(2).text('東北')
)

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

セレクタにoption:firstを使うのがポイント。

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

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

値取得

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

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

選択されたテキスト取得

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

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

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

値設定

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

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

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

クリア

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

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

値取得

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

値設定

jQueryにおけるフォーム値の取得と設定