スポンサードリンク

概要

フォーム(form)の値を取得する場合、jQueryではval()メソッドやprop()メソッドを使う。
ただし、inputの種類によって癖があるので、各typeにおける「値取得」「値設定」などをメモする。

また、prop()を利用するのでjQueryのバージョンには注意が必要。
このコードを試したときのバージョンは「1.10.1」。

テキスト

val()メソッドを使だけ。未入力の場合は、「""」(空文字)なので安全。

HTML

<input type="text" name="animalText">

値取得


var animal = $(':text[name="animalText"]').val();

値設定


var newText = 'トラ';
$(':text[name="animalText"]').val(newText);

ラジオ

val()メソッドを利用できますが、次のような注意が必要。

  • 値取得では、未選択状態で値取得すると「undefined」になるので要注意。
  • また、値設定では必ず配列で渡さないと反映されないのでこれも要注意。
  • 選択値のテキストを取得する場合は、labelタグで囲んでおく方がよい。

HTML

<input type="radio" name="gender" value="man" id="man"><label for="man">男</label>
<input type="radio" name="gender" value="woman" id="woman"><label for="woman">女</label>

値取得

未選択状態で値取得すると「undefined」になるので要注意。

var genderValue = $(':radio[name="gender"]:checked').val();

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


var genderValue = $(':radio[name="gender"]:checked').val();
var genderText = $('label[for="' + genderValue + '"]').text();

特定の値がチェックされているか


var isWomanChecked = $(':radio[name="gender"][value="woman"]').prop('checked');

値設定

val()メソッドの場合は、必ず値を配列で渡さないと反映されないので要注意。

var genderValue = 'woman';
$(':radio[name="gender"]').val([genderValue]);

checked状態を変更するというやり方でprop()メソッドでも可能。

$(':radio[name="gender"][value="woman"]').prop('checked', true);

トップを選択状態にする


$(':radio[name="gender"]:first').prop('checked', true);

クリア


$(':radio[name="gender"]').prop("checked", false);

チェックボックス

複数の場合、値取得ではval()が利用できないので要注意。

HTML

<input type="checkbox" name="sports" value="baseball" id="baseball" /><label for="baseball">野球</label>
<input type="checkbox" name="sports" value="soccer" id="soccer" /><label for="soccer">サッカー</label>
<input type="checkbox" name="sports" value="valley" id="valley" /><label for="valley">バレー</label>

値取得

複数のチェックボックスを想定するとval()が利用できない。

val()の仕様によると「セレクタに合致している最初の要素のみ」を取得するので、
複数チェックされるチェックボックスの場合は思ったようにはならない。
(ラジオはチェックが単一なのでOK。チェックボックスも単数の場合はval()でもよい。)

よって、eachやmapでループさせる必要がある。

$(':checkbox[name="sports"]:checked').each(function(index, checkbox) {
  var sportsValue = $(checkbox).val();
  console.debug("sportsValue = " + sportsValue);
});
var sportsValues = $(':checkbox[name="sports"]:checked').map(function(index, checkbox) {
  return $(this).val();
});

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

同様にループさせる。

$(':checkbox[name="sports"]:checked').each(function(index, checkbox) {
  var sportsValue = $(checkbox).val();
  var sportsText = $('label[for="' + sportsValue + '"]').text();
  console.debug("sportsText = " + sportsText);
});
var sportsValues = $(':checkbox[name="sports"]:checked').map(function(index, checkbox) {
  var sportsValue =$(this).val();
  var sportsText = $('label[for="' + sportsValue + '"]').text();;
  return sportsText;
});

特定の値がチェックされているか


var isChecked = $('#baseball').prop('checked');

値設定

値設定ではval()が使える。ただし、値を必ず配列で渡さないと反映されないので要注意。
このとき、指定された値以外はチェックが外れる。

$(':checkbox[name="sports"]').val(["baseball","soccer"]);

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

$(':checkbox[name="sports"][value="baseball"]').prop('checked',true);
$(':checkbox[name="sports"][value="soccer"]').prop('checked',true);

クリア


$(':checkbox[name="sports"]').prop('checked', false);

セレクト(単一選択)

選択状態は「:selected」(ラジオやチェックボックスとは異なる)。

HTML

<select name="smokingSelect">
  <option value=""></option>
  <option value="smoking">よく吸う</option>
  <option value="sometime">ときどき</option>
  <option value="nosmoking">吸わない</option>
</select>

値取得


var smokingSelectValue = $('select[name="smokingSelect"]').val();

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


var smokingSelectText = $('select[name="smokingSelect"] option:selected').text();

特定の値がチェックされているか


var isSelected = $('select[name="smokingSelect"] option[value="sometime"]').prop('selected');

値設定


var smokingSelectValue = 'nosmoking';
$('select[name="smokingSelect"]').val(smokingSelectValue);

prop()でも可能。

$('select[name="smokingSelect"] option[value="nosmoking"]').prop('selected',true);

トップを選択状態にする(クリア)


$('select[name="smokingSelect"] option:first').prop('selected', true);

「selectedIndex」を操作するやり方もある。

$('#smokingSelect').prop('selectedIndex', 0);

セレクト(複数選択)

次のような注意が必要。

  • 値取得では、値は配列で返されます。未選択の時は「null」となるので要注意。
  • 値設定も、基本的に配列でおこなう。「null」や空配列を渡すことで未選択状態にすることが可能。
    一つだけ選択させたいなら配列ではなく文字列でも可能。

HTML

<select name="fruitSelect" multiple="multiple">
  <option value="orange">オレンジ</option>
  <option value="apple">アップル</option>
  <option value="grap">グレープ</option>
</select>

値取得

値は配列で返されます。未選択の時は「null」となるので要注意。

var fruitSelectValue = $('select[name="fruitSelect"]').val();

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

複数選択されるので、eachやmapを使ってループさせる必要がある。

$('select[name="fruitSelect"] option:selected').each(function(index, option) {
  var fruitSelectTextValue = $(option).text();
});

var fruitSelectTextValues = $('select[name="fruitSelect"] option:selected').map(function() {
  return $(this).text();
});

特定の値がチェックされているか


var isSelected = $('select[name="fruitSelect"] option[value="apple"]').prop('selected');

値設定

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

var fruitSelectValue = ['apple', 'grap'];
$('select[name="fruitSelect"]').val(fruitSelectValue);

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

$('select[name="fruitSelect"] option[value="apple"]').prop('selected',true);
$('select[name="fruitSelect"] option[value="grap"]').prop('selected',true);

クリア


$('select[name="fruitSelect"]').val([]);

$('select[name="fruitSelect"] option').prop('selected',false);