[jQuery]入力された文字を自動計算して出力する

jsで自動生成するリストの中にあるテキストボックスに入力された数値を自動計算するjsを、ちょっとゴリっと書いてみたときのメモ。

	<!DOCTYPE html>

	<html>
	<head>
	<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js" type="text/javascript" charset="UTF-8"></script>
	</head>
	<body>
	</body>
	<div>総人数：<div id="total"></div>人</div><br>
	<br>
	<br>
	<ul>
	<li><input type="text" id="count1">人</li>
	<li><input type="text" id="count2">人</li>
	<li><input type="text" id="count3">人</li>
	<li><input type="text" id="count4">人</li>
	<li><input type="text" id="count5">人</li>
	</ul>
	<script>
	// ここにスクリプトを記述
	</script>
	</html>

view raw autoCalc.html hosted with ❤ by GitHub

	$(function() {
	// 自動計算
	$("input[id^='count']").live('blur keypress change', function() {
	var sum =0;
	for(i=1; i < $("[id^='count']").length + 1; i++) {
	var count = $("[id='count" + i + "']").val();
	count = count == ""? 0 : count;
	sum += parseFloat(count);
	}
	$("#total").text(sum);
	});
	});

view raw autoCalc.js hosted with ❤ by GitHub

いろいろ応用はできそうな感じですな。

もうちょっと、高速化とか考えたいところです。。

つまブロ