【jQuery】name属性で要素を取得・変更する完全ガイド｜フォーム操作・セレクタ活用まで

HTMLのフォーム要素は name 属性でグループ管理されています。jQueryでは name 属性をセレクタに使って要素を選択し、値の取得・変更・グループ操作が簡単にできます。本記事ではname属性を使ったセレクタ・値の取得・ラジオボタン・チェックボックスのグループ操作まで解説します。

1. name属性で要素を選択する

// name属性で要素を取得
var $name  = $('[name="username"]');
var $email = $('[name="email"]');

// 特定のタグタイプと組み合わせ
var $input  = $('input[name="email"]');
var $select = $('select[name="country"]');

// name属性の取得
var nameAttr = $('input').first().attr('name');
console.log(nameAttr);  // 'username' など

2. フォーム要素の値を取得する

<input type="text" name="username" value="田中">
<input type="email" name="email" value="tanaka@example.com">
<input type="number" name="age" value="30">

// テキスト入力の値を取得
var username = $('[name="username"]').val();
var email    = $('[name="email"]').val();
console.log(username);  // '田中'

// 全フォーム要素の値をオブジェクトに収集
var formData = {};
$('input, select, textarea').each(function () {
  var name = $(this).attr('name');
  if (name) formData[name] = $(this).val();
});

// jQueryのserialize()を使う方法
var queryStr = $('form').serialize();  // 'username=田中&email=...'
var formObj  = $('form').serializeArray();  // [{name:'username', value:'田中'}, ...]

3. ラジオボタンの選択値を取得

<input type="radio" name="gender" value="male"> 男性
<input type="radio" name="gender" value="female"> 女性
<input type="radio" name="gender" value="other"> その他

// 選択されているラジオボタンの値
var gender = $('input[name="gender"]:checked').val();
console.log(gender);  // 'male' / 'female' / 'other'

// 選択されているか確認
if ($('input[name="gender"]:checked').length === 0) {
  alert('性別を選択してください');
}

// プログラムでラジオボタンを選択
$('input[name="gender"][value="female"]').prop('checked', true);

4. name属性を変更する

// name属性の変更
$('input[name="old-name"]').attr('name', 'new-name');

// 動的フォームで行追加時にname属性を連番にする
$('.form-row').each(function (i) {
  $(this).find('[name^="item"]').attr('name', 'item[' + i + ']');
});

// name属性を削除
$('input').removeAttr('name');

5. 同じname属性のグループを操作する

// チェックボックスグループの全選択
$('input[name="hobby"]').prop('checked', true);

// チェックボックスグループの全解除
$('input[name="hobby"]').prop('checked', false);

// 選択された値の一覧を取得
var hobbies = $('input[name="hobby"]:checked').map(function () {
  return $(this).val();
}).get();
console.log(hobbies);  // ['読書', '映画']

// グループ内の特定要素を選択
$('input[name="size"][value="M"]').prop('checked', true);

6. フォーム送信時の値収集パターン

$('form').on('submit', function (e) {
  e.preventDefault();

  var data = {
    username: $('[name="username"]').val(),
    email:    $('[name="email"]').val(),
    gender:   $('[name="gender"]:checked').val(),
    hobbies:  $('[name="hobby"]:checked').map(function () {
                return $(this).val();
              }).get()
  };

  console.log(data);

  // Ajaxで送信
  $.ajax({
    url: '/api/submit',
    method: 'POST',
    data: JSON.stringify(data),
    contentType: 'application/json'
  });
});

まとめ

jQueryでname属性を活用するには [name="xxx"] セレクタが基本です。ラジオボタンは :checked フィルタで選択値を取得、チェックボックスグループは map().get() で配列化します。フォーム全体を一括収集するには serialize() や serializeArray() も便利です。

関連記事: jQueryのattr()でHTML属性を操作する方法 / jQueryでselectタグの値とテキストを取得する方法

よくある質問（FAQ）