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

フォーム(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()メソッドを利用できますが、次のような注意が必要。

選択値のテキストを取得する場合は、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>

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

var genderText = $('label[for="' + genderValue + '"]').text();

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

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()の仕様によると｢セレクタに合致している最初の要素のみ｣を取得するので、
複数チェックされるチェックボックスの場合は思ったようにはならない。
()

よって、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()でも可能。

$(':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>

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()でも可能。

$('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);