htmlの質問です｡図のようにﾁｪｯｸﾎﾞｯｸｽがｵﾝになってる時にﾁｪｯｸﾎﾞｯｸｽの下にまる画像を表示しﾁｪｯｸﾎﾞｯｸｽがｵﾌになってる時にﾊﾞﾂ画像を表示するとか…

人力検索はてな

ﾓﾊﾞｲﾙ版を表示しています｡PC版はこちら

htmlの質問です｡図のようにﾁｪｯｸﾎﾞｯｸｽがｵﾝになってる時にﾁｪｯｸﾎﾞｯｸｽの下にまる画像を表示し
ﾁｪｯｸﾎﾞｯｸｽがｵﾌになってる時にﾊﾞﾂ画像を表示するとかできるのでしょうか？よろしくお願いします｡

●拡大する

●質問者: 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項目の選択状態で表示する画像を変更する為に､ﾃﾞｰﾀﾍﾞｰｽを使う必要も､ｸｯｷｰを使う必要もありません｡