jQueryでinputのtext/checkbox/selectなどフォームの値の取得・設定をする

CSS/JSフレームワークを作るにあたって、フォーム周りの操作をする必要があったので、まとめてみました。基本は val() を使えばいいのですが、微妙に違いがあったりして忘れやすいです。

テキスト

値の取得

var value = $('input[name="textbox"]').val();

値の設定

$('input[name="textbox"]').val('値を設定');

空かどうか

if(!$(this).val().match(/\S/g)){
  console.log('テキストが入力されていません');
}

ラジオ

１
２

値の取得

var value = $('input[name="radiobox"]:checked').val();

テキストの取得

var text = $('input[name="radiobox"]:checked').parents('label').text();

値の設定

$('input[name="radiobox"]').val(['two']);
$('input[name="radiobox"][value="two"]').prop('checked', true);

val() と prop() の２通りがあります。

値が選択されているかどうか

if ($('input[name="radiobox"]:checked').val() == undefined){
  console.log('値が１つも選択されていない');
}
else if ($('input[name="radiobox"][value="two"]').prop('checked')){
  console.log('２が選択されています');
}
else{
  console.log('２以外が選択されています');
}

最初の値を選択しておく

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

値の解除

$('input[name="radiobox"]').prop('checked', false);

チェックボックス

１
２
３

値の取得

var value_each = [];
$('input[name="checkbox[]"]:checked').each(function(){
  value_each.push($(this).val());
});
var value_map = $('input[name="checkbox[]"]:checked').map(function(){
  return $(this).val();
});

each() か map() を使って回します。

テキストの取得

var text_each = [];
$('input[name="checkbox[]"]:checked').each(function(){
  text.push($(this).parents('label').text());
});
var text_map = $('input[name="checkbox[]"]:checked').map(function(){
  return $(this).parents('label').text();
});

値の設定

$('input[name="checkbox[]"]').val(['two', 'thr']);
$('input[name="checkbox[]"][value="two"]').prop('checked', true);
$('input[name="checkbox[]"][value="thr"]').prop('checked', true);

値の全選択

$('input[name="checkbox[]"]').prop('checked', true);

値が選択されているかどうか

if ($('input[name="checkbox[]"]:checked').val() == undefined){
  console.log('値が１つも選択されていません');
}
else if ($('input[name="checkbox[]"][value="thr"]').prop('checked')){
  console.log('３が選択されています');
}
else{
  console.log('３以外が選択されています');
}

値の解除

$('input[name="checkbox[]"][value="two"]').prop('checked', false);

値の全解除

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

セレクトボックス（単一）

  
  １
  ２
  ３

値の取得

var value = $('select[name="selectbox"]').val();

テキストの取得

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

値の設定

$('select[name="selectbox"]').val('two');
$('select[name="selectbox"] > option[value="two"]').prop('selected', true);

値が選択されているかどうか

if ($('select[name="selectbox"] > option[value="thr"]').prop('selected')){
  console.log('３が選択されています');
}

値の解除

$('select[name="selectbox"] > option:first').prop('selected', true);
$('select[name="selectbox"]').prop('selectedIndex', 0);

セレクトボックス（複数）

  
  １
  ２
  ３

値の取得

var value = $('select[name="selectbox"]').val();

テキストの取得

var text_each = [];
$('select[name="selectbox"] > option:selected').each(function(){
  text_each.push($(this).text());
});
var text_map = $('select[name="selectbox"] > option:selected').map(function(){
  return $(this).val();
});

値の設定

$('select[name="selectbox"]').val(['one', 'thr']);
$('select[name="selectbox"] > option[value="one"]').prop('selected', true);
$('select[name="selectbox"] > option[value="thr"]').prop('selected', true);

値が選択されているかどうか

if ($('select[name="selectbox"]').val() == null){
  console.log('値が１つも選択されていません');
}
else if ($('select[name="selectbox"] > option[value="one"]').prop('selected')){
  console.log('１が選択されています');
}

値の解除

$('select[name="selectbox"] > option[value="two"]').prop('selected', false);

値の全解除

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

val() と prop() の２通りがあります。