jqueryでformの各値の取得やセット

テキストエリアやラジオボタン、チェックボックス等の値取得

作成日:2017-12-07, 更新日:2024-03-22

各値の取得

テキストエリア、テキストフィールド、セレクト

$(〇〇〇).val()

※セレクトタグで複数許可してるときは配列で返ってくる

セレクトの「value」の値じゃなくて文字列

$('[name=〇〇〇] option:selected').text()

※選択されている「<option value="△△△">☆☆☆</option>」の「☆☆☆」

ラジオボタン

$(〇〇〇:checked).val()

チェックボックス（配列で返ってくる）

var aryVal = $('〇〇〇:checked').map(function(index, el) { return $(this).val(); }).get();

※「get()」がないとオブジェクトになる

チェックボックス（CSVで返ってくる）

var aryVal = $('〇〇〇:checked').map(function(index, el) { return $(this).val(); }).get().join();

※「get().join()」にする

hash形式の取得（「<input type="〇〇〇" name="r_val[]" value="〇〇〇" />」みたいなヤツ）

// 「[」「]」をエスケープする（※エスケープさせる文字もエスケープさせる必要あり）
var tmpDom = $('[name=r_val\\[\\]]');

// 引用符で囲むってのもアリ
// var tmpDom = $('[name="r_val[]"]');

selectタグで選択されたoptionの属性値

▼基本型

$('select option:selected').〇〇〇();

▼changeイベントとの兼ね合いのサンプル

<select>
  <option value="〇A〇" data-foo="〇A〇">〇A〇</option>
  <option value="〇B〇" data-foo="〇B〇">〇B〇</option>
</select>

<script>
  $(〇〇〇).on('change', '〇〇〇', function(){
    // 選択されたoptionの「data-foo」の値
    var dataFoo = $(this).find('option:selected').data('foo');
    
    // 選択されたoptionのvalueだったら「option:selected」は無くて大丈夫
    var val = $(this).val();
  });
</script>

チェックボックスがチェックされているか

$(〇〇〇).on('click', '〇〇〇', function(){
  if ( $(this).prop('checked') ) {
    // チェックされている
  }
  else {
    // チェックされていない
  }
});

各値のセット

基本

$(〇〇〇).val(値);

※selectタグも同じ

チェックボックスなどのチェックをつける

disabledやreadonly属性のon/offも同様

「prop()」を使う。

チェックをつける

$(〇〇〇).prop('checked', true);

チェックを外す

$(〇〇〇).prop('checked', false);