以下のサンプルHTMLのとおり、チェックボックス+小画像という見た目ですが、
●チェックが入っていない時は、画像を薄く(style="opacity: 0.2;")して
●チェックが入っている時は、通常通り(style="opacity: 0.2;"はつけない、またはopacity: 1)
●チェックがオン⇔オフされたら瞬時に上記が反映
こういう動的な動作をさせたいですが、シンプルな方法(javascript?)をご教示いただけないでしょうか。
専門的には「onclickのイベントを発生させる」などになるのでしょうが、
最初に画面の飛んでくる際、PHP5でMySQL5の値を読み込んでチェックを入れるかどうかも判断していますので、
そこが難しいところかと予想しています。。。
<html>
<body>
<table>
<tr>
<td><label><input type="checkbox" name="val1" value="1" checked>りんご<br><img src="./img/10.png" width="100" height="100" style="opacity: 0.2;"></label></td>
<td><label><input type="checkbox" name="val2" value="1" checked>みかん<br><img src="./img/20.png" width="100" height="100" style="opacity: 0.2;"></label></td>
<td><label><input type="checkbox" name="val3" value="1" checked>ぶどう<br><img src="./img/30.png" width="100" height="100" style="opacity: 0.2;"></label></td>
</tr>
</table>
</body>
</html>
No.1ベストアンサー
- 回答日時:
スクリプトはいらない。
<style>
td img { width: 100px; height: 100px; }
td input[type="checkbox"]:not(:checked)~img {opacity: .2;}
</style>
<table>
<tr>
<td><label><input type="checkbox" name="val1" value="1" checked>りんご<br><img src="i0.png" alt="りんご"></label>
<td><label><input type="checkbox" name="val2" value="1" checked>みかん<br><img src="i0.png" alt="みかん"></label>
<td><label><input type="checkbox" name="val3" value="1" checked>ぶどう<br><img src="i0.png" alt="ぶどう"></label>
</table>
ご回答ありがとうございます、お礼が遅くなりすみません、ようやく本課題の修正作業に戻ってきました、今組み込みました、要するにこの「魔法の一行」で期待する動作が実現できるのですね、感激しました。
td input[type="checkbox"]:not(:checked)~img {opacity: .2;}
同時に、こんな複雑なCSSの記述方法があることも初めて知り、勉強になりました。本当にありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- JavaScript clear機能を失わずにファイルアップロード機能を作成したい 3 2023/06/10 16:12
- JavaScript アップロードファイルの種類によって処理を分岐させたいのですが書き方が分からずアドバイスお願いします 4 2023/06/17 19:12
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- AJAX JavascriptからPHPへのAjax通信でnullが返ってくる 3 2022/08/03 22:00
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- HTML・CSS flex の各子要素を横幅 100% にしたい 1 2022/09/22 21:25
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
<JavaScript>tableタグを入力不...
-
javascript でテーブル操作
-
クリックごとに文字色が交互に...
-
【jQuery】tableループ内のIDの...
-
javascriptでクリックするごと...
-
return trueとreturn falseの用...
-
プルダウンで選択すると、DBの...
-
onClickとsubmitの処理順序
-
条件により、リンク先に画面遷...
-
ボタンを押すとチェックボック...
-
【jQuery】input nameの文字列...
-
Selectの中身をfor文で入れる
-
確認ダイアログの出し方(JavaS...
-
1つのform内に2つのsubmitボタ...
-
VB.NET DateTimeの型について
-
<input>の選択肢をプルダウンメ...
-
チェックボックスのON/OFFに応...
-
オフになっているチェックボッ...
-
submitボタンを表示することな...
-
クリックさせたいが、click()が...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
<JavaScript>tableタグを入力不...
-
selectのonChangeが動作しません
-
javascriptで文字を拡大・縮小...
-
tbody要素のinnerHTMLが書き換...
-
テキストエリアに入力した改行...
-
idの振り直しについて
-
【jQuery】tableループ内のIDの...
-
javascriptで<table>背景色の取得
-
テーブルの行数を可変長にした...
-
javascriptで画像をテーブルに...
-
テーブルのセルのクリック時、...
-
Javascriptでテーブルタグの座...
-
Table内TDの子要素を移動させた...
-
javascriptでクリックするごと...
-
別窓で画像を表示する場合に余...
-
外部のデータファイルの読み込...
-
クリックごとに文字色が交互に...
-
DIVで同一ページ内にポップアッ...
-
innerHTMLでのテーブル作成
-
javascriptで画像の移動
おすすめ情報
