MENU

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() の2通りがあります。

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


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

最初の値を選択しておく


$('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('値が1つも選択されていません');
}
else if ($('input[name="checkbox[]"][value="thr"]').prop('checked')){
  console.log('3が選択されています');
}
else{
  console.log('3以外が選択されています');
}

値の解除


$('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('3が選択されています');
}

値の解除


$('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('値が1つも選択されていません');
}
else if ($('select[name="selectbox"] > option[value="one"]').prop('selected')){
  console.log('1が選択されています');
}

値の解除


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

値の全解除


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

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