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

テキスト・テキストエリア

• val()を使用して取得・設定をする。

<input type="text" id="area" value="テキスト">

// 値の取得
$('#area').val();
// 値の設定
$('#area').val('テスト');

ラジオボタン

<label><input type="radio" name="sex" value="0" checked>男</label>
<label><input type="radio" name="sex" value="1">女</label>

選択したラジオボタンの値取得

var val = $('[name=sex]:checked').val();
console.log(val); //=>0

ラジオボタンを選択状態に

//配列で渡す必要がある。
$('[name=area]').val(['0']);

propを使う方法もある。

$('[name=area][value=0]').prop('checked',true);

ラジオボタンにチェックが入っているか

if($('[name=sex').prop('checked')){
 //チェックされていた場合
}

チェックボックス

<label><input type="checkbox" class="area" value="0">東京</label>
<label><input type="checkbox" class="area" value="1">神奈川</label>

値の取得

• val()で取得すると、先頭のチェックボックスの値のみ取得するため、map()とget()を使用し、配列として返却させる。

// 配列として返却するためにはget()を使用する。
var area = $('.area:checked').map(function() {
  return $(this).val();
}).get();

チェックをつける（はずす)

// チェックをつける。
$('.area').prop('checked',true);
// チェックをはずす。
$('.area').prop('checked',false);

チェックボックスにチェックが入っているか

if($('.area').prop('checked')){
 //チェックされていた場合
}

セレクトリスト(単一選択)

<select id="area">
  <option value=""></option>
  <option value="0">東京</option>
  <option value="1">神奈川</option>
</select>

// 値の取得
var area = $('#area').val();
// 値の設定
var area = $('#area').val(0);

セレクトリスト(複数選択)

<select id="area" multiple="multiple">
  <option value=""></option>
  <option value="0">東京</option>
  <option value="1">神奈川</option>
</select>

// 値の取得(配列で返却)
var area = $('#area').val();
// 値の設定(設定した項目以外は選択状態から外れる)
$('#area').val([0,1]);