Javascriptで動的にチェックボックスをつくる

チェックボックスの選択肢が異様に多かったりなどで、こつこつ

<input type="checkbox" name="sample" value="0" />hoge

とか書くのがしんどいときにはjavascriptで動的に作ってしまいましょう。

そんなに難しいことをしていないので、javascriptに自身があるって方は読み飛ばしてください。

コードはこんな感じ。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>動的にチェックボックスを作るサンプル</title>
	<script type="text/javascript" src="http://www.google.com/jsapi"></script>
	<script type="text/javascript">google.load("prototype", "1.6.0.3");</script>
	<script type="text/javascript">
	document.observe('dom:loaded', initCheckbox);
	function initCheckbox()
	{
		var values=['item1','item2','item3','item4'];
		var hoge = $('hoge');
		values.each(
			function (value, index){
			var chkboxstr = '<input type="checkbox" name="genre" value="' + value.escapeHTML() + '" id="genre_' + index + '">'
			+ '<label for="genre_' + index + '">' + value.escapeHTML() + '</label>';
			hoge.insert(chkboxstr);
					}
			);
	}
	</script>
</head>
<body>
<form id="frm1">
	<div id="hoge"></div>
</form>
</body>
</html>

こんな感じでかくと、こう表示されます。

ソースを見てもチェックボックスはないですが、firebugなどで見ると動的に作られていることが確認できます。

なお、prototype.jsをダウンロードしてきてもいいのですが、めんどくさかったので、
Google Ajax API使用しました.

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("prototype", "1.6.0.3");</script>

と書くだけで、prototype.jsを読み込んでくれます。

追記

肝心のjavascriptを書き忘れていたという大失態を犯していたため、
書きなおしました。

cutmail's blog

write the code

Javascriptで動的にチェックボックスをつくる

追記