jQuery

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

More than 3 years have passed since last update.


テキスト


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