jQueryで複数のテキストボックスの値をまとめて取得する - jQuery

jQueryで複数のテキストボックスの値をまとめて取得するコードを紹介します。

概要

クラスなどの複数要素を選択するセレクターで要素を選択し、val()メソッドを呼び出した場合、最初に選択された要素のvalueの値のみ取得できます。複数要素を選択した場合は、map関数を用いると複数の値をまとめて取得できます。

プログラム例

コード

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
  <script type="text/javascript" src="jquery-2.0.3.js"></script>
  <script type="text/javascript">
    $(document).ready(function () {
      $("#Button1").click(function () {
        var inputText = $(".textBox").map(function (index, el) {
          return $(this).val();
        });

        showtext = "";
        for (i = 0; i < inputText.length; i++) {
          showtext += inputText[i] + "<br/>";
        }
        $("#output").html(showtext);

      })
    })
  </script>
</body>
  <input id="Text1" class="textBox" type="text" /><br/>
  <input id="Text2" class="textBox" type="text" /><br />
  <input id="Text3" class="textBox" type="text" /><br />
  <input id="Text4" class="textBox" type="text" /><br />
  <input id="Text5" class="textBox" type="text" /><br />
  <input id="Button1" type="button" value="button" />
  <div id="output"></div>
</html>

解説

  <script type="text/javascript">
    $(document).ready(function () {
      $("#Button1").click(function () {
        var inputText = $(".textBox").map(function (index, el) {
          return $(this).val();
        });

        showtext = "";
        for (i = 0; i < inputText.length; i++) {
          showtext += inputText[i] + "<br/>";
        }
        $("#output").html(showtext);

      })
    })
  </script>

  $(document).ready(function () {
    ...
  }

上記コードにより、ページ表示後にJavaScriptが実行されます。

  $("#Button1").click(function () {
    var inputText = $(".textBox").map(function (index, el) {
      return $(this).val();
    });

    showtext = "";
    for (i = 0; i < inputText.length; i++) {
      showtext += inputText[i] + "<br/>";
    }
    $("#output").html(showtext);
  })

ボタンのクリックイベントを実装するコードです。セレクタで複数の要素(今回の例の場合は"textBox"クラス)を選択し、map関数によりそれぞれの選択要素に対してコールバック関数を実行します。コールバック関数ではval()メソッドを呼び出し、テキストボックスの値を返します。返した値はinputTextに配列として格納されます。
inputText配列から値を取り出し整形してid="output"の枠に表示します。