• ベストアンサー

チェックボックスにチェックして文字（リンク）表示

チェックボックスにチェックを入れると文字が表示され、 さらにその文字に別窓にとぶリンクを貼りたいです。 下記ページを参考に作成しているのですが、java初心者のため 上手く記述できません。 <参考ページ> http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1458650604 どのように記述すればよいですか？

質問者が選んだベストアンサー

  • ベストアンサー
回答No.2

No.1です。 > 回答して頂いたソースで上手く出来なかったので、作成しなおしました。 上手く出来なかった理由を教えていただけると対応もしやすいのですが…。 「if(document.getElementById)」はブラウザがJavaScript関数を サポートしているかチェックなので、チェックボックスのON/OFFとは関係ありません。 チェックを変えた時に動作するのは、単に関数が呼ばれたからです。 こんな感じでできると思いますよ。 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Language" content="ja"> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <meta http-equiv="Content-Script-Type" content="text/javascript"> </head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript"> <!-- function show_html(check) { if (check.checked) { document.getElementById("url").innerHTML = '<a href="./index.html"target="_blank">・A<\/a>';} else {document.getElementById("url").innerHTML = '';} if (check.checked) { document.getElementById("url2").innerHTML = '<a href="./index.html"target="_blank">・B<\/a>';} else {document.getElementById("url2").innerHTML = '';} if (check.checked) { document.getElementById("url3").innerHTML = '<a href="./index.html"target="_blank">・C<\/a>';} else {document.getElementById("url3").innerHTML = '';} if (check.checked) { document.getElementById("url4").innerHTML = '<a href="./index.html"target="_blank">・D<\/a>';} else {document.getElementById("url4").innerHTML = '';} if (check.checked) { document.getElementById("url5").innerHTML = '<a href="./index.html"target="_blank">・E<\/a>';} else {document.getElementById("url5").innerHTML = '';} } function show2_html(check) { if (check.checked) { document.getElementById("url6").innerHTML = '<a href="./index.html"target="_blank">・F<\/a>';} else {document.getElementById("url6").innerHTML = '';} if (check.checked) { document.getElementById("url7").innerHTML = '<a href="./index.html"target="_blank">・G<\/a>';} else {document.getElementById("url7").innerHTML = '';} } // --> </script> <title>sample</title> </head> <body> <br> <input type="checkbox" onClick="show_html(this);">H<br> <span id="url"> </span><br> <span id="url2"> </span><br> <span id="url3"> </span><br> <span id="url4"> </span><br> <span id="url5"> </span><br> <input type="checkbox" onClick="show2_html(this);">I<br> <span id="url6"> </span><br> <span id="url7"> </span><br> </body> </html>

ai0908
質問者

お礼

お礼が遅くなり申し訳ありませんでした。 ご丁寧な回答ありがとうございました。

その他の回答 (1)

回答No.1

こんな感じでしょうか？ <!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"> <script type="text/javascript"> <!-- function checkChange(val){ if(val.checked) { document.getElementById("linkField").style.display = "block"; } else { document.getElementById("linkField").style.display = "none"; } } //--> </script> <title>sample</title> </head> <body> <input type="checkbox" onchange="checkChange(this)" checked> <div id="linkField"><a href="#junp">リンク</a></div> <br/> ココに上下にある改行コードをたくさん入れると分かりやすいかも？ <br/> <div id="junp">飛び先</div> </body> </html> ちなみに、JavaとJavaScriptは全然別物です。 JavaScriptを短縮してJavaと呼んでいるワケではないので、注意しましょう。

ai0908
質問者

補足

早々に回答頂きありがとうございます。 回答して頂いたソースで上手く出来なかったので、作成しなおしました。 しかし、一回チェックを入れて、チェックをはずすと更新しないと文字が消えません。 よろしければ再度アドバイスお願いします。 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Language" content="ja"> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <meta http-equiv="Content-Script-Type" content="text/javascript"> </head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript"> <!-- function show_html() { if (document.getElementById) { document.getElementById("url").innerHTML = '<a href="./index.html" target="_blank">・A<\/a>'}; if (document.getElementById) { document.getElementById("url2").innerHTML = '<a href="./index.html" target="_blank">・B<\/a>'}; if (document.getElementById) { document.getElementById("url3").innerHTML = '<a href="./index.html" target="_blank">・C<\/a>'}; if (document.getElementById) { document.getElementById("url4").innerHTML = '<a href="./index.html" target="_blank">・D<\/a>'}; if (document.getElementById) { document.getElementById("url5").innerHTML = '<a href="./index.html" target="_blank">・E<\/a>'} } function show2_html() { if (document.getElementById) { document.getElementById("url6").innerHTML = '<a href="./index.html" target="_blank">・F<\/a>'}; if (document.getElementById) { document.getElementById("url7").innerHTML = '<a href="./index.html" target="_blank">・G<\/a>'} } // --> </script> <title>sample</title> </head> <body> <br> <input type="checkbox" onClick="javascript:show_html();">H<br> <span id="url"> </span><br> <span id="url2"> </span><br> <span id="url3"> </span><br> <span id="url4"> </span><br> <span id="url5"> </span><br> <input type="checkbox" onClick="javascript:show2_html();">I<br> <span id="url6"> </span><br> <span id="url7"> </span><br> </body> </html>

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • eメールは5000文字が限界ですか？

    eメールは5000文字が限界ですか？ ウイルコムでは１万文字以上http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q139706713 SBでは全角300000文字http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q129753002 とのことで、このたびauの5000文字というのがいかに少ないか、につき驚いております。 （「だったら他にいけよ」というのはナシでおねがいします） これ、何とかならないのでしょうか？ すなわち、何か端末を変えたりプランを変えたりしたら、ウン万文字以上送受信できるような仕組み・サービスってないでしょうか？ よろしくお願いします。

    • ベストアンサー
    • au
  • 表示されるフォントが丸ゴシックになる

    Windows XP IE6.0 例えば↓のサイトですが、私のPCでは 丸ゴシックで表示されます。 http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q14991269 Yahoo知恵袋は質問のページは全て丸ゴシックで表示されますし、 Yahoo知恵袋だけではなく、他のサイトでも丸ゴシックで表示されることがあります。 ↓も参考にしたのですが、治りません。 http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1122067806 よろしくお願いします。

  • 海外旅行の質問に対する、嫌がらせ

    このサイトで、以下のような質問をした場合に嫌がらせはありますか?。 別のサイトの質問ですが、 http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1487977674 http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1387974503 http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1187973456 http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1487970979 http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1487969879

  • 人生のことでとても悩んでます。よろしくお願いします

    高校生です。人生悩んでます。もういろんなことが重なってどうしたらいいのかさっぱりわかりません。生きてるのが正直辛いです。親も友達もみんな最近信用できなくなってきて拠り所がありません。人間関係もうまくいかず、最近は再受験か何かしらをして転校も考えてます。 僕は自分なりに頑張ってたつもりなんですけど周りは認めてくれず、どこまでやったら頑張ったと言ってもらえるのかわかりません。生まれてこの方まともに誉められたことがありません。子供みたいでごめんなさい。 経緯を話すとおそらく文字数オーバーになるので過去に僕が質問したリンクを貼ります。申し訳ありません。 中学時代の親友も今は忙しくて中々話せず、もう相談しても問題のない人がいないんです。 以下、過去に自分が質問したものです。他サイトの質問が大半になってます。マナーが悪くて本当にごめんなさい。 リアルの人に相談してもいつも不幸自慢だと言われて終わってしまうのでもしよければ、せめてここで相談させてください。少しのことでもなんでもいいのでよろしくお願いします。 https://okwave.jp/qa/q10028301.html https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q10265429795?fr=ios_other https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q12262948162?fr=ios_other https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q13262513313?fr=ios_other https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q12243531207?fr=ios_other https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q10266311175?fr=ios_other https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q11261692406?fr=ios_other https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q10251098100?fr=ios_other https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q11245006601?fr=ios_other

  • 知恵袋では余り回答が来ません　何故でしょうか？

    http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q13138542748 http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q14138542709

  • これら回答者は統合失調症だと思いますか？

    http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q14136843289 http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1343218888

  • 恐怖の秘密保護法？あなたはどちらの回答者達に賛成？

    あなたはどちらが真実に近いと思いますか？ http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q13118210758 http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q11118433416 真実は一体どこにあるのやら？

  • 今年一番笑ったQ&Aサイトの爆笑珍問答

    あなたが今年一番笑ったものを教えてください。 自分の質問でも他人の質問でも構いません。 <自> http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q13100914248 <他> http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q13106810738 他サイトであればリンクを貼っても削除されないと思います。 このサイトだと削除対象になるため、 概要だけを教えてください。

  • 彼が幸せなのが許せません。

    私から散々金を巻き上げ、不幸にした彼が幸せなのが許せません。 彼にはひどい扱いを受けて来ました。 http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1297171002 http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1397833748 http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1398248863 その彼が、今の彼女との幸せそうな写真をブログにアップしています。 私にも至らない所があったことは分かっていますが、どうしても彼の幸せを許す気になれません。 どうすれば全て受け入れて許せるでしょうか？

  • 電源をオフにしてもウイルスは拡散しますか？

    パソコンがウイルスに感染した場合、 「電源をオフにしてもウイルスが拡散される」という意見（下記リンク）と http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q12148409912 「電源をオフにしていればウイルスは起動せず拡散されない」という意見 （下記リンク） http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q14155095784 があり、どちらを信じたら良いのかわかりません。結局どちらが正しいのですか？

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する