jqueryでinput要素の「name属性」「value属性」「type属性」を取得する方法を徹底解説

2024-05-25

jQuery で <input> 要素の属性名と値を取得する方法

attr() メソッドは、要素の属性を取得または設定するために使用されます。属性名を渡すことで、その属性の値を取得できます。

// input要素の "name" 属性の値を取得
var name = $('input').attr('name');
console.log(name); // 例： "username"

// input要素の "type" 属性の値を取得
var type = $('input').attr('type');
console.log(type); // 例： "text"

属性名に直接アクセスする

属性名にドット (.) を繋げて、直接アクセスすることもできます。ただし、この方法は非推奨なので、できるだけ attr() メソッドを使うようにしましょう。

// input要素の "name" 属性の値を取得
var name = $('input').name;
console.log(name); // 例： "username"

// input要素の "type" 属性の値を取得
var type = $('input').type;
console.log(type); // 例： "text"

補足

上記の例では、$('input') セレクタを使ってすべての <input> 要素を対象としています。特定の要素のみを対象としたい場合は、より具体的なセレクタを使用する必要があります。
attr() メソッドは、存在しない属性にアクセスした場合に null を返すことに注意してください。
複数の属性の値を同時に取得したい場合は、オブジェクトとして取得することもできます。

var attrs = $('input').attr({
  'name': true,
  'type': true
});

console.log(attrs.name); // 例： "username"
console.log(attrs.type); // 例： "text"

jQuery で <input> 要素の属性名と値を取得するサンプルコード

HTML

<!DOCTYPE html>
<html>
<head>
  <title>jQuery で input 要素の属性を取得する</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <input type="text" id="username" name="user" value="Taro Yamada">
  <input type="password" id="password" name="pass">
  <button onclick="getAttributeValues()">属性値を取得</button>

  <script>
    function getAttributeValues() {
      // username 入力要素の name 属性の値を取得
      var name = $('#username').attr('name');
      console.log('name 属性の値:', name); // 例： "user"

      // username 入力要素の value 属性の値を取得
      var value = $('#username').attr('value');
      console.log('value 属性の値:', value); // 例： "Taro Yamada"

      // password 入力要素の type 属性の値を取得
      var type = $('#password').attr('type');
      console.log('type 属性の値:', type); // 例： "password"
    }
  </script>
</body>
</html>

説明

このコードは以下の処理を実行します。

HTML ドキュメントの読み込み完了を待つ
getAttributeValues() 関数定義
- この関数は、ボタンをクリックされたときに呼び出されます。
username 入力要素の name 属性の値を取得
- $('#username').attr('name') を使用して、name 属性の値を取得します。
- 取得した値は name 変数に格納されます。
- コンソールに name 属性の値を出力します。

このサンプルコードをどのように実行できますか？

このコードを HTML ファイル (例： index.html) に保存します。
Web ブラウザでその HTML ファイルを開きます。
"属性値を取得" ボタンをクリックすると、コンソールに各入力要素の属性名と値が出力されます。

取得したい属性を変更できます。
処理結果をダイアログボックスやアラートメッセージなどで表示できます。
Ajax を使用して、サーバーに属性値を送信できます。

jQuery で <input> 要素の属性名と値を取得するその他の方法

// input要素の "checked" プロパティの値を取得 (true または false)
var isChecked = $('input[type="checkbox"]').prop('checked');
console.log(isChecked); // 例： true (チェックされている場合)

// input要素の "value" プロパティの値を取得
var value = $('input[type="text"]').prop('value');
console.log(value); // 例： "Taro Yamada"

データ属性にアクセスする

data-* 属性を使って、要素に任意のデータを保存することができます。データ属性にアクセスするには、属性名に data- を先頭に付けて、ドット (.) を繋げてアクセスします。

// input要素に保存された "data-user-id" 属性の値を取得
var userId = $('input').data('userId');
console.log(userId); // 例： 12345

// input要素に保存された "data-email" 属性の値を取得
var email = $('input').data('email');
console.log(email); // 例： [email protected]

セレクタで属性値を直接指定する

属性名と値を直接セレクタに指定することで、その属性を持つ要素を取得できます。

// name 属性が "user" で value 属性が "Taro Yamada" の input要素を取得
var element = $('input[name="user"][value="Taro Yamada"]');
console.log(element); // 例： <input type="text" id="username" name="user" value="Taro Yamada">

// type 属性が "password" のすべての input要素を取得
var elements = $('input[type="password"]');
console.log(elements); // 例： <input type="password" id="password" name="pass">

注意事項