一つの画像をクリックしたら他の画像も一斉に切り替えたい

前提

java、thymeleaf、springboot

一つの画像をクリックすると他の画像も一斉に変わるようにしたいのですが、
何をしてもうまくいきません。
for文でできるのかと思っているのですが、、、
よろしければご教授お願いいたします。

実現したいこと

以下のコードと同じ動作をfor文で実現したい

javascript
1var pics_src = new Array("images/square-1.jpg","images/check_mark-1.jpg");
2var num = 0;
3var images_src = new Array("images/chkBox_off.jpg","images/chkBox_on.jpg");
4
5function allChange(){
6    if (num == 1) {
7        num = 0;
8    }
9    else {
10        num ++;
11    }
12    document.getElementById("allChkBox").src=pics_src[num];
13    document.getElementById("chkBox1").src=images_src[num];
14    document.getElementById("chkBox2").src=images_src[num];
15    document.getElementById("chkBox3").src=images_src[num];
16}

該当のソースコード

javascript
1var pics_src = new Array("images/square-1.jpg","images/check_mark-1.jpg");
2var num = 0;
3var images_src = new Array("images/chkBox_off.jpg","images/chkBox_on.jpg");
4
5function allChange(){
6    if (num == 1) {
7        num = 0;
8    }
9    else {
10        num ++;
11    }
12    document.getElementById("allChkBox").src=pics_src[num];
13    document.getElementById("chkBox1").src=images_src[num];
14    document.getElementById("chkBox2").src=images_src[num];
15    document.getElementById("chkBox3").src=images_src[num];
16}

html
1<table class="srResult-table">
2    <tr>
3        <th><image class="chkBoxImage" id="allChkBox" onclick="allChange()" src="/images/square-1.jpg"></th>
4        <th class="table-name">お客様名</th>
5        <th class="table-bd">生年月日</th>
6        <th class="table-add">住所</th>
7        <th>案内フラグ</th>
8    </tr>
9    <tr>
10        <td><image class="chkBoxImage" id="chkBox1" onclick="change1()" src="/images/chkBox_off.jpg"></image></td>
11        <td>山田太郎  (ヤマダタロウ)</td>
12        <td>0000/00/00</td>
13        <td>XX県XX市XX町0-00-00</td>
14        <td th:align=center>未</td>
15    </tr>
16    <tr>
17        <td><image class="chkBoxImage" id="chkBox2" onclick="change2()" src="/images/chkBox_off.jpg"></image></td>
18        <td>佐藤次郎  (サトウジロウ)</td>
19        <td>0000/00/01</td>
20        <td>XX県XX市XX町0-00-01</td>
21        <td th:align=center>済</td>
22    </tr>
23    <tr>
24        <td><image class="chkBoxImage" id="chkBox3" onclick="change3()" src="/images/chkBox_off.jpg"></image></td>
25        <td>田中三郎  (タナカサブロウ)</td>
26        <td>0000/00/02</td>
27        <td>XX県XX市XX町0-00-02</td>
28        <td th:align=center>エラー</td>
29    </tr>
30</table>

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

回答1件

ベストアンサー

javascript
1<script>
2document.addEventListener('click', e=>{
3  const pics_src = ["images/square-1.jpg","images/check_mark-1.jpg"];
4  const images_src = ["images/chkBox_off.jpg","images/chkBox_on.jpg"];
5  const t=e.target;
6  const changeImage=(t,n)=>Object.assign(t,{src:images_src[n],alt:['off','on'][n]});
7  if(t.closest('.chkBoxImage')){
8    const n=images_src.indexOf(t.getAttribute('src'))^1;
9    changeImage(t,n);
10  }
11  if(t.closest('#allChkBox')){
12    const n=pics_src.indexOf(t.getAttribute('src'))^1;
13    Object.assign(t,{src:pics_src[n],alt:['off','on'][n]});
14    document.querySelectorAll('.chkBoxImage').forEach(x=>changeImage(x,n))
15  }
16});
17</script>
18<img id="allChkBox" src="images/square-1.jpg" alt="off"><br>
19<img class="chkBoxImage" src="images/chkBox_off.jpg" alt="off"><br>
20<img class="chkBoxImage" src="images/chkBox_off.jpg" alt="off"><br>
21<img class="chkBoxImage" src="images/chkBox_off.jpg" alt="off"><br>