html上で、表のセルに画像を配置して複数枚並べています。その外で選択されたチェックボックスに対応する行のみリアルタイムで表示したいです。

前提・実現したいこと

html上で、表のセルに画像を配置して複数枚並べています。その外で選択されたチェックボックスに対応する行のみリアルタイムで表示したいです。
☑︎A
□B
☑︎C
→
[A1.jpg][A2.jpg][A3.jpg]
[C1.jpg][C2.jpg][C3.jpg]

チェックをつけた後、OKボタンを押すことで画像の表が表示するということでも構いません。

該当のソースコード

html
1<form>
2      <input checked type="checkbox">A
3      <input checked type="checkbox">B
4      <input checked type="checkbox">C
5    <table class="imageTable">
6      <tr>
7        <td><img src="A1.jpg"></td>
8        <td><img src="A2.jpg"></td>
9        <td><img src="A3.jpg"></td>
10      </tr>
11      <tr>
12        <td><img src="B1.jpg"></td>
13        <td><img src="B2.jpg"></td>
14        <td><img src="B3.jpg"></td>
15      </tr>
16      <tr>
17        <td><img src="C1.jpg"></td>
18        <td><img src="C2.jpg"></td>
19        <td><img src="C3.jpg"></td>
20      </tr>

試したこと

canvas等使い表示する方法も試しましたが、実現したいものには至りませんでした。
ゆくゆくは表の中のセルにチェックボックスも追加したり、
iphoneやAndroid、PCどの環境でも問題なく動く
シンプルでわかりやすい構造を求めております。
当方htmlの初心者です。
知識不足で大変申し訳ございませんが、皆様のアドバイスいただけましたら幸いです。
何卒宜しくお願い致します。

行動規範の内容に同意します

回答1件

ベストアンサー

下記でどうでしょうか。

html
1<form>
2  <input checked type="checkbox" id="A"><label for="A">A</label><br>
3  <input checked type="checkbox" id="B"><label for="B">B</label><br>
4  <input checked type="checkbox" id="C"><label for="C">C</label>
5  <table class="imageTable">
6    <tr id="trA">
7      <td><img src="https://placehold.jp/150x150.png?text=A1"></td>
8      <td><img src="https://placehold.jp/150x150.png?text=A2"></td>
9      <td><img src="https://placehold.jp/150x150.png?text=A3"></td>
10    </tr>
11    <tr id="trB">
12      <td><img src="https://placehold.jp/150x150.png?text=B1"></td>
13      <td><img src="https://placehold.jp/150x150.png?text=B2"></td>
14      <td><img src="https://placehold.jp/150x150.png?text=B3"></td>
15    </tr>
16    <tr id="trC">
17      <td><img src="https://placehold.jp/150x150.png?text=C1"></td>
18      <td><img src="https://placehold.jp/150x150.png?text=C2"></td>
19      <td><img src="https://placehold.jp/150x150.png?text=C3"></td>
20    </tr>
21  </table>
22</form>

css
1.imageTable tr {
2  display: none;
3}
4#A:checked ~ .imageTable #trA,
5#B:checked ~ .imageTable #trB,
6#C:checked ~ .imageTable #trC{
7  display: block;
8}