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

  • 449
    いいね
  • 2
    コメント
この記事は最終更新日から1年以上が経過しています。

テキスト

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におけるフォーム値の取得と設定