チェックボックスを選択するとテキストボックスが表示

質問

質問失礼します。

チェックボックスが下記のようにある場合ですが、
どれかではなく複数選択で
テキストボックスを表示させるにはどうしたらよいでしょうか？

<input type="checkbox" name="example" value="" />テレビ　←チェックしたらテキストボックス表示
<input type="checkbox" name="example" value="" />新聞　←チェックしたらテキストボックス表示
<input type="checkbox" name="example" value="" />CM　←チェックしたらテキストボックス表示
<input type="checkbox" name="example" value="" />その他　←チェックしたらテキストボックス表示

色々なJavaScriptを試したのですが、
どうも挙動がおかしく、クリックを続けると表示がされたりできなかったり、
という具合になります。

それぞれテキストボックスを表示させたいチェックボックスに
反映できるJavaScriptをご教示願いますでしょうか？

宜しくお願い致します。

回答No.1

yambejp · ベストアンサー

複数選択で表示するテキストボックスは一つなのでしょうかそれぞれのチェックボックスに
対応した複数なのでしょうか？

ひとつでよければこんな感じでどうでしょう？
複数なら応用してください

<script>
try{
document.addEventListener ('click',function(e){clickfunc(e)},true); //基本
}catch(e){
document.attachEvent('onclick',function(e){clickfunc(e)}); //IE
}
window.onload=function(){displayHoge();}
function clickfunc(e){
var t = (e.srcElement || e.target);
if(t.nodeName=="INPUT" && t.type=="checkbox" && t.name=="example"){
displayHoge();
}
}
function displayHoge(){
var elements=document.getElementsByTagName("INPUT");
var count=0;
for(var i=0;i<elements.length;i++){
var t=elements[i];
if(t.type=="checkbox" && t.name=="example" && t.checked){
count++;
}
}
var t=document.getElementById("hoge");
t.style.display=count>=2?"inline":"none";
}
</script>
<input type="checkbox" name="example" value="">テレビ
<input type="checkbox" name="example" value="">新聞
<input type="checkbox" name="example" value="">CM
<input type="checkbox" name="example" value="">その他

<input type="text" name="fuga" value="" id="hoge">

お礼

ご丁寧な回答有難うございます。
早速コードを反映したのですが、
動かないです。。。

対応は複数対応ですが、
JavaScriptはそこまで詳しくはないので応用ができない状態です。

もしよろしければご教示願いますか？

補足

すみません。
あれから頑張ってやってみて動きました。
t.style.display=count>=2?"inline":"none";
部分でカウントしているのですね。
大変失礼しました。