【jQuery】配列のInput Element を取得する方法

jquery

jQueryでInput Type のElementを取得する方法は意外とポピュラーな方法ですが、今回は配列のInput Element を取得する方法を紹介します。

配列のInput Elementとは、同じform内のnameが同じだったら配列として扱われます。

[スポンサーリンク]

このページでやること

配列のInput Element を取得する方法を紹介します。

配列のInput Elementを取得するロジック

こちらのHTMLをブラウザで開くと、input type name がidの値がアラートで表示されます。

<!DOCTYPE html>
<html>
    <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>test</title>
    <meta charset="utf-8">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript" ></script>

    <script type="text/javascript">
        $(document).ready(function(){
            var values = [];
            $("input[name='id']").each(function() {
            	values.push($(this).val());
            });
            alert(values[0]);
            alert(values[1]);
        });
    </script>
     
    </head>
    <body>
        <form action="./" method="get">
            <input type="text" name="id" value="1">
            <input type="text" name="id" value="2">
        </form>
    </body>
</html>

こちらが参考にしたサイトです。

さいごに

普通にjQueryを使っていてもInput Elementを取得する場面にはなかなか出くわさないのですが、AngularjsやBackbone jsなどのMVCフレームワークを使っているとInput Elementを取得しないといけないことがあるので備忘録として残しました。

配列のInput Elementの取得方法って少し特殊だったので色々調べてやってでてきました。。忘れないようにと思っての備忘録でした!
それでは!