ベストアンサー

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

2012/11/26 21:58

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

ai0908
お礼率20% (1/5)

JavaScript
回答数2
ありがとう数1

みんなの回答 （2）
専門家の回答

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

ベストアンサー

bvltiggeari
ベストアンサー率76% (33/43)

2012/11/28 10:52 回答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">  </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>

質問者

お礼 2013/01/30 21:50

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

その他の回答 (1)

bvltiggeari
ベストアンサー率76% (33/43)

2012/11/27 00:29 回答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">  </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と呼んでいるワケではないので、注意しましょう。

質問者

補足 2012/11/27 21:37

早々に回答頂きありがとうございます。回答して頂いたソースで上手く出来なかったので、作成しなおしました。しかし、一回チェックを入れて、チェックをはずすと更新しないと文字が消えません。よろしければ再度アドバイスお願いします。 <!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">  </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>