[HTML,CSS]画像に枠をつける動作とチェックボックスにチェックを入れる動作を同時に行いたい
- 評価
- クリップ 0
- VIEW 5,831
前提・実現したいこと
htmlとcssでプログラムを書いています。
プログラムの中に、<label>でチェックボックスと画像を括っている文があります。
その状態で画像をクリックすると、borderで画像に枠を表示した上で、チェックボックスのvalueの値を習得するという動作を同時にさせたいと考えております。
更に、枠が表示された画像をもう一度クリックすると、チェックが外れ、画像の枠も消えるという動作もさせたいです。
発生している問題・エラーメッセージ
画像をクリックすると、チェックボックスにチェック判定が入り、画像に枠が現れるという一連の状態遷移を実現することが出来ていません。
その後の枠が外れる動作も出来ておりません。
追記
最初の問題だった画像をクリックすると、チェックボックスにチェック判定が入るという動作は実現できましたが、次にクリックするとチェックボックスのチェックだけ消えて枠がそのまま残ってしまいます。
該当のソースコード
編集済
html
<form name="chbox">
<div class="image_box">
<label>
<input class="location_checkbox" type="checkbox" name="test" value="test001">
<img class="thumbnail" src="http://placehold.it/50" alt="test001">
</label>
</div>
</form>css
/* チェックボックスの位置 */
.image_box .location_checkbox {
position: absolute;
top: 12px;
right: 12px;
transform: scale(1);
cursor: pointer;
}
/* チェックが入っていると枠を表示する */
.image_box img.thumbnail.checked {
border: 4px solid blue;
box-sizing: border-box;
}
/* 画像にcheckedクラスが指定されると枠を表示 */
.image_box img.thumbnail.checked + .location_checkbox {
display: block;
}javascript
$(function() {
// 画像がクリックされた時の処理です。
$('img.thumbnail').click(function() {
var $val = document.chbox.knight;
//画像にチェックが入っているか判断します。
if($('.thumbnail').children().hasClass('checked')){
// 現在の選択を解除します。
$(this).removeClass('checked');
}else{
// チェックを入れた状態にします。
$(this).addClass('checked');
$val.find(input.disabled_checkbox.checked).addClass('checked');
}
});
});補足情報(言語/FW/ツール等のバージョンなど)
html、css、javascriptに加え、jquery、phpも使用できます。
最後に
上で述べた内容を実装したいと考えておりましたが、詰まってしまったのでこちらで質問させていただきました。
最後になりましたが、質問をご覧いただきありがとうございました。
初歩的な質問で申し訳ございませんが、ご回答の程よろしくお願い致します。
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 過去に投稿した質問と同じ内容の質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
checkベストアンサー
+2
lavel は label ですね。
<label>
<input class="location_checkbox" type="checkbox" name="test" value="test001">
<img class="thumbnail" src="http://placehold.it/50">
</label>
<label>
<input class="location_checkbox" type="checkbox" name="test" value="test002">
<img class="thumbnail" src="http://placehold.it/50">
</label>label {
display: inline-block;
height: 50px;
position: relative;
width: 50px;
}
.location_checkbox {
position: absolute;
right: 0;
top: 0;
}
.location_checkbox + img {
border: 1px solid rgba( 0, 0, 0, 0 );
}
.location_checkbox:checked + img {
border: 1px solid red;
}追記(蛇足)：JavaScriptでやるならこうする
HTMLは上記回答と同じ。
$(function() {
// 画像だけでなくチェックボックスもクリックを拾いたいのでlabelにイベントを設置
$( '.image_box label' ).click( function() {
var $this = $( this );
// チェックボックスの状態を確認してチェックされている際はラベルにクラスを付ける
if( $this.find( '.location_checkbox' ).prop( 'checked' ) ){
$this.addClass( 'checked' );
} else {
$this.removeClass( 'checked' );
}
});
});.image_box label {
display: inline-block;
min-height: 50px;
min-width: 50px;
position: relative;
}
/* チェックボックスの位置 */
.image_box .location_checkbox {
position: absolute;
top: 12px;
right: 12px;
transform: scale( 1 );
cursor: pointer;
}
.image_box img.thumbnail {
border: 4px solid rgba( 0, 0, 0, 0 );
box-sizing: border-box;
}
/* チェックが入っていると枠を表示する */
.image_box .checked img.thumbnail { /* ラベルにクラスを付けているため書き順が変わっています。 */
border-color: blue;
}投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
+1
javascriptが使えるのであれば、試した内容を記載すると間違った箇所の指摘ができるかと思いますが。。。
動作としては
クリック →
<input>チェック判定、チェック反転、value入手
<img>へclass追加、削除
css →
枠ありclass追加
がjavascriptで表現できれば完了です。
<lavel>にチェックの有無classをつけ、コントロールしたほうが良いかもしれません。
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう！
- ただいまの回答率 88.34%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
質問への追記・修正、ベストアンサー選択の依頼
kei344
2016/05/14 10:50
コードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「</>」ボタンを押すとコードブロックになります。
Cgengodeonngaku
2016/05/14 10:58
貴重な情報ありがとうございます。
ご指摘どうり、修正させて頂きました。
kei344
2016/05/14 11:04
CSSは3つに分割しないでいいですよ。
Cgengodeonngaku
2016/05/14 11:09
再修正させて頂きました。
kei344
2016/05/14 11:52
回答が付いた質問の編集は慎重に行ってください。タイプミス程度なら修正する事もありますが、発生している問題まで置き換えるのはやめましょう。そういう場合は「追記」するものです。
Cgengodeonngaku
2016/05/14 11:56
ご指摘いただいた通りです。質問の編集は本当に軽率でした。次からはこのようなことのないように注意いたします。