jQueryを利用して指定した要素の中のinput等の入力値を簡単に一括取得する方法。
入力値チェックの時等の値を大量に取得する必要がある時に役立ちます。

jQuery

jQueryのeachを使用して要素の名前と値を一括で配列にしてくれます。

<script>
$(document).ready(function(){
	$("#sample1_exec").click(function () {

		// 各値を入れるオブジェクト
		var obj= new Object();

		// テキストの値を取得
		$("#sample1 input:text").each(function(){
			obj[this.name] = this.value
		});

		// 隠し要素の値を取得
		$("#sample1 input:hidden").each(function(){
			obj[this.name] = this.value
		});

		// チェックされた値を取得（チェックボックス・ラジオボタン）
		$("#sample1 input:checked").each(function(){
			obj[this.name] = this.value
		});

		// 結果表示
		var result = "";
		for (var key in obj) {
			result += key +" = " + obj[key] + "<br />";
		}
		$("#sample1_result").html(result);
	});
});
</script>
<from id="sample1">
	テキスト：<input type="text" name="sample1_1" value="テスト"><br />
	<input type="hidden" name="sample1_2" value="0" />
	チェックボックス：<input type="checkbox" name="sample1_2" value="1"><br />
	ラジオボタン：<input type="radio" name="sample1_3" value="0" checked="checked">0
	<input type="radio" name="sample1_3" value="1">1<br />
	<button id="sample1_exec">実行</button>
</from>
<div id="sample1_result">
</div>

hiddenを取得した後にチェックボックスの値を取得しないとチェックボックスの値がhiddenの値で上書きされる可能性があるので気をつけてくさだい。
オブジェクトに入れる時にnameをキーにしているので同名のものが存在すると上書きされるので気をつけてください。

サンプル

テキスト：
チェックボックス：
ラジオボタン：0 1
実行

Javascript

Javasriptでは子要素を取得して子要素の値を取得するようにしました。

<script>
function sample2_exec(){
	// from取得
	var from = document.getElementById('sample2');
	// fromの子要素を取得
	var from_child = from.children;

	// 各値を入れるオブジェクト
	var obj= new Object();
	// fromの子要素の値を取得
	for (var i = 0; i < from_child.length; i++){
		// name未設定のものからは取得しない
		if(from_child[i].name === undefined || from_child[i].name == ""){
			continue;
		}
		// チェックボックス、ラジオボタンはチェックが入ってないものは取得しない
		if(from_child[i].type == 'checkbox' ||from_child[i].type == 'radio'){
			if(!from_child[i].checked){
				continue;
			}
		}
		obj[from_child[i].name] = from_child[i].value;
	}

	// 結果出力
	var result = "";
	for (var key in obj) {
		result += key +" = " + obj[key] + "<br />";
	}
	document.getElementById("sample2_result").innerHTML = result;
}
</script>
<from id="sample2">
テキスト：<input type="text" name="sample2_1" value="テスト"><br />
<input type="hidden" name="sample2_2" value="0" />
チェックボックス：<input type="checkbox" name="sample2_2" value="1"><br />
ラジオボタン：<input type="radio" name="sample2_3" value="0" checked="checked">0
<input type="radio" name="sample2_3" value="1">1<br />
<button id="sample2_exec" onclick="sample2_exec()">実行</button>
</from>
<div id="sample2_result">
</div>
<br />

Javascriptのchildrenを使用しているため、子要素を全て取得してきてしまいます。
そのため子要素直下しか取得できないのでtableの中にあったりすると取得できないようになっています。

サンプル

テキスト：
チェックボックス：
ラジオボタン：0 1
実行
これで一括で値を取得出来るようになります。
応用でチェックボックスに全てチェックを入れるなどのことも可能です。



«前の記事：CSSでナンバリングを表示する方法HTML5で簡単に入力チェックを行う方法：次の記事»