jQuery(JavaScript)で複数のinputの値を取得する

JavaScript(jQuery)で複数のinputの値を取得する場合、name要素に同じ名前を設定することで値を取得することができます。

例:$(‘[name=data]’)

下のinputは、テキスト入力欄のname要素に同じ名前を付けた例です。

<input type="text" id="data1" name="data" /><br />
<input type="text" id="data2" name="data" /><br />
<input type="text" id="data3" name="data" /><br />
<input type="text" id="data4" name="data" /><br />
<input type="text" id="data5" name="data" /><br />
<input type="button" value="テキスト入力" onclick="inputText()" /></br />
<div id="show"></div>

JavaScript(jQuery)を使い、inputに入力したテキストを表示する例です。$(‘name=data]’).lengthで取得した配列の長さを、$(‘[name=data]’)[i].valueで配列に格納されている値を順番に表示しています。

function inputText(){
	$('#show').empty();
	for(var i = 0; i < $('[name=data]').length; i++) {
		$('#show').append('<p>' + $('[name=data]')[i].value);
	}
};

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です