人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

1413428819
●拡大する


●質問者: takanii
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● a-kuma3
●500ポイント ベストアンサー

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 のつもりです。


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

2 ● かずきち。
●0ポイント

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

サンプル
サンプル

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


かずきち。さんのコメント
>|| <input type="checkbox" name="example" value="サンプル">サンプル <input type="checkbox" name="example" value="サンプル" checked>サンプル ||<

かずきち。さんのコメント
見たまま記法で書かないとですねw 上のコードを書けば、いいですよ!!

rouge_2008さんのコメント
この質問は >> htmlの質問です。図のようにチェックボックスがオンになってる時にチェックボックスの下にまる画像を表示し Add Star チェックボックスがオフになってる時にバツ画像を表示する << なので回答になっていません。 checked属性は、選択(※チェック)された状態にするものです。 ・トップページ > HTMLタグリファレンス > <INPUT> > type="checkbox" http://www.htmq.com/html/input_checkbox.shtml ・ > takaniiさん a-kuma3さんの回答を参考にしてCSSで実行するか、checked属性で初期選択項目を設定してある状態で期待通りに動作しない場合は、jislotzさん(ジント兄さん)がコメントしたjavascriptによる方法で実現するといいかもしれません。 以下のサンプルで試した場合にはCSSによる方法で動作しましたが・・・ ・トップページ > CSS3 > E:checked http://www.htmq.com/selector/checked.shtml

かずきち。さんのコメント
<?php // $checkboxの中身は配列 $checkbox = $_REQUEST["chk"]; ?><html> <head> <title>sample04</title> </head> <body> あなたの好きなものは。<hr> <?php for($i=0; $i<sizeof($checkbox); $i++){ print "${checkbox[$i]}<br>"; } ?> <p><a href="form4.html">戻る</a></p> </body> </html> テェックボックスの中身を返す関数は $checkbox = $_REQUEST["chk"]; です。 なので$checkboxにオンオフの値が入っているのでif文で切り分けしないと…

rouge_2008さんのコメント
PHPで解決できる質問ではありませんよ? その都度ページ遷移してもらうように作ればいいという意図でしょうか?

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

rouge_2008さんのコメント
「貴方の要望」って何ですか? 私は質問者ではありませんが・・・ takaniiさん宛てのコメントもしているので、読んでいれば分かると思います。 CSSやJavascriptによる解決方法が既に出ていますし、そちらの方が適切だと思います。 input項目の選択状態で表示する画像を変更する為に、データベースを使う必要も、クッキーを使う必要もありません。
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ