1413428819 htmlの質問です。図のようにチェックボックスがオンになってる時にチェックボックスの下にまる画像を表示し

チェックボックスがオフになってる時にバツ画像を表示するとかできるのでしょうか?よろしくお願いします。

回答の条件
  • 1人1回まで
  • 13歳以上
  • 登録:2014/10/16 12:06:59
  • 終了:2014/10/16 16:55:41

ベストアンサー

id:a-kuma3 No.1

a-kuma3回答回数4521ベストアンサー獲得回数18792014/10/16 12:23:49

ポイント500pt

HTML が、こんな感じで、

<input type="checkbox" class="check_with_image">
<div class="check_image"></div>

CSS が、こんな感じです。

.check_image {
    height: 100px;
}
.check_with_image + .check_image {
    background: URL(batu.png) no-repeat;
}
.check_with_image:checked + .check_image {
    background: URL(maru.png) no-repeat;
}

batu.png が、×の画像の URL で、
maru.png が、○の画像の URL のつもりです。

id:a-kuma3

動くものがないと、訴求力が弱いのかと思い、はてなブログで試してみました。
http://a-kuma3.hatenablog.com/entry/2014/10/16/150113

2014/10/16 15:02:51

その他の回答(1件)

id:a-kuma3 No.1

a-kuma3回答回数4521ベストアンサー獲得回数18792014/10/16 12:23:49ここでベストアンサー

ポイント500pt

HTML が、こんな感じで、

<input type="checkbox" class="check_with_image">
<div class="check_image"></div>

CSS が、こんな感じです。

.check_image {
    height: 100px;
}
.check_with_image + .check_image {
    background: URL(batu.png) no-repeat;
}
.check_with_image:checked + .check_image {
    background: URL(maru.png) no-repeat;
}

batu.png が、×の画像の URL で、
maru.png が、○の画像の URL のつもりです。

id:a-kuma3

動くものがないと、訴求力が弱いのかと思い、はてなブログで試してみました。
http://a-kuma3.hatenablog.com/entry/2014/10/16/150113

2014/10/16 15:02:51
id:kazukichi_0914 No.2

かずきち。回答回数126ベストアンサー獲得回数82014/10/16 14:14:30

こっちの方が簡単ですよw

サンプル
サンプル

ここのcheckboxでcheckedというオプションを付けるところがポイント。
jsで長ったらしく書いてたら大変なので、こちらが主流かと。

他5件のコメントを見る
id:kazukichi_0914

その意図でした。貴方の要望を叶えるにはmysqlなどの外部DBを使うか、自分でなんらかのクッキーを相手に食わせるのは有効なのかなと思います。

2014/10/16 15:34:53
id:rouge_2008

「貴方の要望」って何ですか?
私は質問者ではありませんが・・・
takaniiさん宛てのコメントもしているので、読んでいれば分かると思います。

CSSやJavascriptによる解決方法が既に出ていますし、そちらの方が適切だと思います。
input項目の選択状態で表示する画像を変更する為に、データベースを使う必要も、クッキーを使う必要もありません。

2014/10/16 16:47:18
  • id:jislotz
    CSSでやる回答がついているので、
    JavaScriptでやるなら、みたいなのを書いておきます。
    書き方はほんとに色々あるのですが、このコード例では、
    JavaScriptのコードが分かりやすくなるように、HTMLの部品にIDをつけます。

    HTML:
    <input id="foo" type="checkbox" checked="checked" onchange="toggleImage();">
    <img id="bar" alt="○" src="maru.png">


    JavaScript:
    <script>
    function toggleImage() {
    var checkbox = document.getElementById('foo');
    var img = document.getElementById('bar');
    if (checkbox.checked) {
    img.alt = '○';
    img.src = 'maru.png';
    } else {
    img.alt = '☓';
    img.src = 'batu.png';
    }
    }
    </script>
  • id:takanii
    ありがとうございます!
  • id:Lhankor_Mhy
    かずきちさんの回答はこれのコピペですね。
    http://plog.pya.jp/program/php/lesson08/sample04.html
    コードの意味も分かってんのかな?
  • id:a-kuma3
    >かずきちさんの回答はこれのコピペですね。
    ああ、コメントの。
    「チェックボックス HTML プログラム」で検索、コピペでしょう :-)

    因みに回答の方は、こちらからのコピペ。
    http://www.tagindex.com/html_tag/form/input_checkbox.html

    「チェックボックス HTML」で検索、コピペですね。
  • id:Lhankor_Mhy
    プロフィール拝見しましたが、東京大学大学院工学系研究科某専攻かあ。
    まあ、工学部出でもプログラミングできない人っていますからねえ……

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません