MENU
  1. ホーム
  2. プログラミング言語
  3. JavaScript
  4. Javascript学習
  5. jQueryで「name」を操作・取得する便利技のまとめ！

jQueryで「name」を操作・取得する便利技のまとめ！

Javascript学習
マサト

こんにちは、ライターのマサトです！今回は、HTMLフォームの制御に必要となる「name」属性の指定方法や取得・変更など、さまざまな操作をjQueryでコントロールする方法を学習しましょう！

この記事では、

  • 「attr()」でnameを取得しよう！
  • 「name」を指定して値を取得する
  • 「name」を変更するには？

という基本的な内容から学習を進めていき、

  • 「name」でcheckboxを配列で取得しよう！
  • 「name」の特殊なセレクタ(selector)指定方法！

などの応用的な使い方に関しても解説していきます。この記事で、jQueryの「name」活用技をしっかり学習して自分のスキルアップを目指しましょう！

目次

「name」とは？

それでは、まず最初に今回のテーマである「name」についての基本的な知識を身につけておきましょう！

一般的には、HTMLで作成する「フォーム」の各要素に「name」属性を付与し、JavaScriptからコントロールするためによく使われています。

<form name="myform">
    <input type="text" name="user-name">
    <input type="email" name="user-email">
    <input type="submit" name="btn">
</form>

各HTML要素を取得したり指定するだけなら「id」「class」などでも代用できます。しかし、フォームの場合は「外部サーバー」などへデータを送信したりするので、その際には「name」属性が付与されていないと必要な情報が送信されないので欠かせません。

そこで、今回はこの「name」属性について、値を取得したりjQueryによるさまざまな方法で指定する手法について学習をしていきましょう！

「attr()」でnameを取得しよう！

それでは、jQueryによる「name」を使った基本的なプログラミング方法を見ていきましょう！まずは、次のようなHTMLフォームがあると考えてください。

<form name="myform">

    <p><input type="text" name="user-name" placeholder="名前の入力…"></p>
    <p><input type="email" name="user-email" placeholder="メルアドの入力…"></p>
    <input type="submit" name="btn" value="送信">

</form>

この状態で、例えばname属性が「user-email」のinput要素を取得するには次のようになります。

$(function() {
    var name = $('input[name="user-email"]');

    console.log( name[0] );
});

実行結果

<input type="email" name="user-email" placeholder="メルアドの入力…">

jQueryのセレクタ指定で、「input[name=”user-email”]」のように記述すれば任意のname属性を持っているHTML要素が取得できることが実行結果からも分かりますね。

jQueryの場合、一般的に【 要素 [ 属性=属性名 ] 】の構文であれば大抵のHTML要素は取得可能です。

また、「attr()」メソッドを利用することでname属性名を取得することもできます！

var name = $('input[type="email"]').attr('name');

console.log( name );

実行結果

user-email

この例では、セレクタ指定に「type=”email”」と記述することで、メルアドを入力するフォームを指定しています。そして、続けて「attr()」メソッドの引数に「name」属性を指定することで、属性名となる「user-email」を取得しているわけです。

このように、「name」を使ったHTML要素の指定方法や「attr()」メソッドを使ったname属性名の取得方法は基本となるので忘れないように練習をしておきましょう！

「name」を変更するには？

次は、意図的にname属性名を変更してみましょう！この場合も先ほど使用した「attr()」メソッドを使うことで簡単に実現することが可能です。次のコード例を見てください。

<body>
    <input type="text" name="user-name">

    <script>
        var value = $('input[name="user-name"]').attr('name', 'new-user');

        console.log( value[0] );
    </script>
</body>

実行結果

<input type="text" name="new-user">

この例では、「user-name」というname属性名を持っているinput要素に、「attr()」を使って新しく「new-user」というnameに変更しようとしています。

「attr( 属性, 新しい属性名 )」という構文で記述することで、任意のname属性名を変更できているのが実行結果からも分かりますね。

実際には、nameを変更するケースというのは多くありませんが、機能の1つとして実現できることを覚えておきましょう！

「name」を指定して値(value)を取得する

今度は、指定したname属性を持つ要素の値（value）を取得してみましょう！例えば、input要素のname属性を指定して「値」を取得するには次のようになります。

<body>
    <input type="text" name="user-name" value="こんにちは">

    <script>
        var value = $('input[name="user-name"]').val();

        console.log( value );
    </script>
</body>

実行結果

こんにちは

この例では、値（value）に「こんにちは」という文字列があらかじめ設定されたinput要素のname属性を指定しているのが分かります。そして、セレクタを指定したあとに続けて「val()」メソッドを使うことで、指定した要素が持つ「value値」を取得することが出来るわけです。

「name」でcheckboxを配列で取得しよう！

これまでは、1つだけの「name」を扱ってきましたが、実際にはフォーム部品におけるname属性名は同じ名称が複数使われるケースも珍しくありません。なかでも、フォームの「checkbox」に関しては、同じname属性名が複数使われることが一般的です。

例えば、チェックの入っている要素だけを複数取得するには次のように記述します。

<body>
    <input type="checkbox" name="fruits" value="apple" checked>：リンゴ
    <input type="checkbox" name="fruits" value="banana">：バナナ
    <input type="checkbox" name="fruits" value="melon" checked>：メロン

    <script>
        var result = $('input[name="fruits"]:checked');

        console.log( result[0] );
        console.log( result[1] );
    </script>
</body>

実行結果

<input type="checkbox" name="fruits" value="apple" checked>
<input type="checkbox" name="fruits" value="melon" checked>

この例では、jQueryのセレクタ指定で「input[name=”fruits”]」を記述することで、nameが「fruits」の要素をすべて指定しています。

さらに、続けて「:checked」をセレクタ内に記述することで、チェックが入っている要素だけを抽出して配列データとして取得することが出来るわけです。

このような手法を応用すると、チェックが入っている要素の「値(value)」だけを抽出するのも簡単です！次のコード例を見てください。

<body>
    <input type="checkbox" name="fruits" value="apple" checked>：リンゴ
    <input type="checkbox" name="fruits" value="banana">：バナナ
    <input type="checkbox" name="fruits" value="melon" checked>：メロン
    <script>
        var result = $('input[name="fruits"]:checked').map(function() {
            return $(this).val();
        })

        console.log( result );
    </script>
</body>

実行結果

["apple", "melon", ...]

この例では、先ほどと同じくチェックの入っている要素だけを抽出しているのですが、「map()」を使うことでそれぞれの要素の「値(value)」だけをさらに抽出することができるわけです。

実行結果を見ても分かる通り、「値」は配列として返されているのが分かりますね。

「name」の特殊なセレクタ(selector)指定方法！

さて、「name」を複数取得する方法について学習しましたが、もし異なる名称のnameをまとめて取得したい場合にはどうすれば良いでしょうか？

このような時は、特殊なセレクタ指定を行うことで「部分一致」や「前方・後方一致」などによる取得方法が用意されています。そこで、簡単なサンプル例と一緒にそれぞれの使い方を詳しく学習してみましょう！

「前方一致」の場合

まずは、「前方一致」によるセレクタの指定方法を学びましょう！これは、name属性名の先頭にある文字列を指定することで、一致するnameをすべて取得することができる手法になります。次のサンプル例を見てください！

<body>
    <input name="user-text" type="text" value="こんにちは">
    <input name="user-email" type="email" value="abc@def.com (mailto:abc@def.com)">
    <input name="tel-sample" type="tel" value="080-1234-5678">
    <input name="btn-sample" type="submit" value="送信">

    <script>
        $('input[name^="user"]').each( function( index, elem ) {

            console.log( elem );

        })
    </script>
</body>

実行結果

<input name="user-text" type="text" value="こんにちは">
<input name="user-email" type="email" value="abc@def.com (mailto:abc@def.com)">

この例では、それぞれ異なる「name」を持ったフォーム部品が用意されているのが分かりますね。そこで、例えばname属性名が「user」から始まる要素をすべて取得したい場合は、「name^=”user”」のように記述すれば実現できます。

そして、「each()」を使うことで、複数取得した要素を1つずつ出力することができます。「^」を=と組み合わせることで、前方一致が実現できることを覚えておきましょう！

「後方一致」の場合

次に「後方一致」による指定方法を見てみましょう！考え方は同じで、「name$=属性名」という記述で実現可能になっており「$」を使うのがポイントですね。次のサンプル例を見てください！

<body>
    <input name="user-text" type="text" value="こんにちは">
    <input name="user-email" type="email" value="abc@def.com (mailto:abc@def.com)">
    <input name="tel-sample" type="tel" value="080-1234-5678">
    <input name="btn-sample" type="submit" value="送信">

    <script>
        $('input[name$="sample"]').each( function( index, elem ) {

            console.log( elem );

        })
    </script>
</body>

実行結果

<input name="tel-sample" type="tel" value="080-1234-5678">
<input name="btn-sample" type="submit" value="送信">

HTML部分は先ほどと同じで、jQueryのセレクタ指定は「name$=”sample”」と記述しており、name属性名の末尾が「sample」で終わる要素だけを抽出するという意味になります。

実行結果を見ると、見事に電話番号のフォームとボタン要素が取得できているのが分かります。

「部分一致」の場合

今度は、「部分一致」によるセレクタ指定方法を勉強しましょう！これまで学んだ「前方・後方一致」とは違い、指定した文字列がname属性名のどこかに一致したらすべて取得できることになります。次のサンプル例を見てください！

<body>
    <input name="user-text" type="text" value="こんにちは">
    <input name="user-email" type="email" value="abc@def.com (mailto:abc@def.com)">
    <input name="tel-sample" type="tel" value="080-1234-5678">
    <input name="btn-sample" type="submit" value="送信">

    <script>
        $('input[name*="te"]').each( function( index, elem ) {

            console.log( elem );
        
        })
    </script>
</body>

実行結果

<input name="user-text" type="text" value="こんにちは">
<input name="tel-sample" type="tel" value="080-1234-5678">

この例では、「name*=”te”」と記述していることから、name属性名のどこかに「te」という文字が入っている要素はすべて取得できることになります。

実行結果を見ると、「user-text」「tel-sample」の2つが取得できており、どちらも「te」が入っている要素であることが確認できますね。

また、これまでご紹介してきたサンプルの中で使用していたeachメソッドについて、さらに詳しく知りたい方は以下の記事を参考にして下さい。

【jQuery入門】2種類のeach()による繰り返し処理まとめ！
更新日：2024年3月1日

まとめ

今回は、HTMLフォームで必要となる「name」属性の指定方法や取得・変更などについて学習しました！最後に、ポイントだけをおさらいしておきましょう！

  • jQueryでは「要素 [ 属性=属性名 ] 」という指定でHTML要素を簡単に取得できる
  • 「attr()」メソッドを使うことで、nameを取得・変更することができる
  • 「:checked」を指定するとチェックボックスのチェックが入った要素だけ指定可能
  • 「^=」「$=」「*=」による特殊なセレクタ指定方法で複数まとめて要素を取得可能

これらの内容を踏まえて、ぜひ自分のプログラムにも積極的に取り入れて実践していきましょう！

Javascript学習
jQuery name

この記事を書いた人

マサトのアバター マサト

フリーランスのIT系ライターを10年従事する兵庫県出身の40歳。侍ブログ編集部としては、これまで270記事以上を執筆。
30歳を過ぎてから独学でJavaScript, Node.js, Linuxを習得した経験を活かし、初心者が迷わない記事作成を意識しながらプログラミングの楽しさを知ってもらうために活動しています。趣味はキャンプと登山です。

この著者の記事一覧へ
目次