checkboxにチェックを入れると項目が表示される

質問

教えて下さい。

チェックボックスにチェックを入れると、idやclassで指定されている範囲をjavascriptでリアルタイムに表示させたいのですが、どのようにすればよいでしょうか？

例えば、AというチェックボックスとBというチェックボックスがあって↓

<form name="000">
<input type="checkbox" id="chk1" />チェック1
<input type="checkbox" id="chk2" />チェック2
</form>

チェックが入ると、指定した任意のid属性が表示されるようにしたいんです。

例えば、チェック1のチェックボックスにチェックが入ったら"forChk1"を、チェック2にチェックが入ったら"forChk2"みたいな。

<span id="forChk1">チェック1に関する項目</span>
<span id="forChk2">チェック2に関する項目</span>

javascriptのonClickで実現する方法になるのでしょうか？
どなたかご教授頂けると光栄ですm(_ _)m

回答No.2

yyr446

イベントハンドラーをアタッチしてみました。
<script type="text/javascript">
<!--
window.onload = function () {
//@cc_on
document./*@if (1)attachEvent('on'+ @else@*/addEventListener(/*@end@*/
'click', function (evt) {
var e　= evt./*@if (@_jscript) srcElement @else@*/ target /*@end@*/;
if (e.type=="checkbox"){
document.getElementById("for" + e.id).style.display=e.checked?"":"none";
}
}, true);
}
// -->
</script>

回答No.1

yambejp

非常に大雑把にやるとこんな感じ。

<style>
.hide{
display:none;
}
</style>
<script>
window.onload=function(){
var tags=document.getElementsByTagName("input");
for(var i=0;i<tags.length;i++){
if(tags[i].type=="checkbox" && tags[i].id.match(/^chk[0-9]+$/)){
tags[i].onclick=function(){
document.getElementById("for"+this.id).className=this.checked?"":"hide";
}
}
}
}
</script>
<form>
<input type="checkbox" id="chk1" />チェック1
<input type="checkbox" id="chk2" />チェック2
</form>

<span id="forchk1" class="hide">チェック1に関する項目</span>
<span id="forchk2" class="hide">チェック2に関する項目</span>