アプリ版：「スタンプのみでお礼する」機能のリリースについて

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

解決済

  • 質問者：ai0908
  • 質問日時：
  • 回答数：2件

チェックボックスにチェックを入れると文字が表示され、
さらにその文字に別窓にとぶリンクを貼りたいです。
下記ページを参考に作成しているのですが、java初心者のため
上手く記述できません。

<参考ページ>
http://detail.chiebukuro.yahoo.co.jp/qa/question …

どのように記述すればよいですか？

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (2件)

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>
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

通報する
お礼日時：2013/01/30 21:50

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と呼んでいるワケではないので、注意しましょう。

この回答への補足

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

補足日時：2012/11/27 21:37
通報する
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報