LoginSignup
635

More than 5 years have passed since last update.

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

Last updated at Posted at 2014-06-29

テキスト

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
635