チェックボックスのオン⇔オフに応じて並列の画像の濃さを動的に変化させたい

解決済

質問者：litton101
質問日時：2021/10/31 22:05
回答数：1件

以下のサンプル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>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： babu_babu_baboo
回答日時：2021/11/01 03:23

スクリプトはいらない。

- 2
- 件

通報する

この回答へのお礼

ご回答ありがとうございます、お礼が遅くなりすみません、ようやく本課題の修正作業に戻ってきました、今組み込みました、要するにこの「魔法の一行」で期待する動作が実現できるのですね、感激しました。

td input[type="checkbox"]:not(:checked)~img {opacity: .2;}

同時に、こんな複雑なCSSの記述方法があることも初めて知り、勉強になりました。本当にありがとうございました。

通報する

お礼日時：2021/11/03 00:28

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！