- ベストアンサー
チェックONによるiframe有効
私は、今HP作成を行っているのですが以下で困っています。 タグの勉強から始めた素人です。 よろしくお願いいたします。 やりたいことは、 チェックボックスが4つありすべてのチェックが入るとiframe内のメールフォームに記入可能になる というものです。 私なりに調べたところ、JavaScriptというものを使って、最初はiframe内に画像などを表示させておき、チェックがすべて入るとiframe内にメールフォームのURLへWebToするという方法です。 しかし、上記をどのように書けばいいかわかりません。 どなたかご教授お願いいたします。 ※出来れば、これをコピーして、URLを変更すればOK!というものが欲しいです。。。
- みんなの回答 (2)
- 専門家の回答
質問者が選んだベストアンサー
yambejpさんの回答でも問題はありませんが、次のソースでは、ダミーページが必要ありません。 いかがでしょう。 仕組みとしては、はじめにiframeを表示しない状態にしておいて、チェックボックスがクリックされた際に毎回各チェックボックスの状態(ONorOFF)を確認し、すべてのチェックボックスがチェックされていたらiframeを表示するようにしています。 if((cc0 == 1) && (cc1 == 1) && (cc2 == 1) && (cc3 == 1)) この部分を変更すると「1つ目と3つ目がonになっていてそれ以外がOFFのときに表示する」といったこともできます。 <html><head> <script type="text/javascript"> <!-- function flame(){ cc0 = this.f0.c0.checked; cc1 = this.f0.c1.checked; cc2 = this.f0.c2.checked; cc3 = this.f0.c3.checked; ifst = document.all["iframe0"].style; if((cc0 == 1) && (cc1 == 1) && (cc2 == 1) && (cc3 == 1)){ ifst.display = "block"; } else { ifst.display = "none"; } } --> </script> </head> <body> <form id="f0"> <input type="checkbox" name="c0" onClick="flame()"> <input type="checkbox" name="c1" onClick="flame()"> <input type="checkbox" name="c2" onClick="flame()"> <input type="checkbox" name="c3" onClick="flame()"> </form> <span id=iframe0 style="DISPLAY: none"> <iframe id="if0" src="fuga.htm"> </iframe> </span> </body> </html> fuga.htmにはメールフォームを書いてください。
その他の回答 (1)
- yambejp
- ベストアンサー率51% (3827/7415)
>出来れば、これをコピーして、URLを変更すればOK!というものが欲しい 丸ナゲは禁止されています、理解していますか? とりあえずこんな方法でどうでしょう? //hoge.htm <script> window.onload=function(){ var f=document.getElementById("f0"); for(var i=0;i<f.length;i++){ if(f[i].type=="checkbox") f[i].onclick=function(){ var if0=document.getElementById("if0"); if(!this.checked){ if0.src="fuga.htm"; return true;} var flg=true; var f=this.form; for(var i=0;i<f.length;i++){ if(f[i].type=="checkbox" & !f[i].checked){flg=false;break;} } if(flg) if0.src="piyo.htm"; return true; } } } </script> <form id="f0"> <input type="checkbox"> <input type="checkbox"> <input type="checkbox"> <input type="checkbox"> </form> <iframe id="if0" src="fuga.htm"> </iframe> //fuga.htm fuga //piyo.htm piyo fuga.htmにはダミーページを、piyo.htmにはメールフォームを書いてください