前提
JavaのSpring Boot、Thymeleafを使用。
全選択チェックボックスのイメージ画像がクリックされたときに、個別チェックボックスのイメージ画像もチェックされた状態の画像に、全てチェックがついた状態の場合はチェックが外れている画像に全て切り替わるようにしたいのですが、調べてもいまいち理解が出来ず実装出来ないでいます。
for文で全てのチェックボックスのvalueか画像の状態をチェックしていって画像を設定するという助言はいただいているのですがどうやって画像の状態をチェックしていくのか理解が出来ていません。
今現在はチェックボックスの画像をクリックすると、そのクリックしたチェックボックスだけがチェックが入った状態、チェックが外れた状態の画像に切り替わるようになっています。
よろしければ、ご指導をお願いいたします。
実現したいこと
全選択チェックボックスのイメージ画像がクリックされたときに、個別チェックボックスのイメージ画像もチェックされた状態の画像に、全てチェックがついた状態の場合はチェックが外れている画像に全て切り替わるようにしたい。
該当のソースコード
javascript
1var pics_src = new Array("images/square-1.jpg","images/check_mark-1.jpg");2var num = 0;3 4function allChange(){5 if (num == 1) {6 num = 0;7 }8 else {9 num ++;10 }11 document.getElementById("allChkBox").src=pics_src[num];12}13 14var images_src = new Array("images/chkbox_off.jpg","images/chkbox_on.jpg");15var i = 0;16 17function change1(){18 if (i == 1) {19 i = 0;20 }21 else {22 i ++;23 }24 document.getElementById("chkBox1").src=images_src[i];25}26 27var images_src = new Array("images/chkbox_off.jpg","images/chkbox_on.jpg");28var i = 0;29 30function change2(){31 if (i == 1) {32 i = 0;33 }34 else {35 i ++;36 }37 document.getElementById("chkBox2").src=images_src[i];38}39 40var images_src = new Array("images/chkbox_off.jpg","images/chkbox_on.jpg");41var i = 0;42 43function change3(){44 if (i == 1) {45 i = 0;46 }47 else {48 i ++;49 }50 document.getElementById("chkBox3").src=images_src[i];51}
html
1<!DOCTYPE html>2<html xmlns:th="http://www.thymeleaf.org">3<head>4 <meta charset="utf-8">5 <link th:href="@{/css/style.css}" rel="stylesheet" type="text/css">6 <script type="text/javascript" th:src="@{/js/style.js}"></script>7 <title>input</title>8</head>9 10<body>11<header>12 <a th:href="@{/}">ヘッダー</a>13</header>14<div class="error">15 <p class="error-message">エラーメッセージ</p>16</div>17<div class="form">18 <form>19 <div class="form-nameKana">20 <div class="form-name">21 <h2 class="column-title">名前</h2>22 <p>エラーメッセージ</p>23 <input type="text">24 </div>25 <div class="form-kana">26 <h2 class="column-title">名前カナ</h2>27 <p>エラーメッセージ</p>28 <input type="text">29 </div>30 </div>31 <div class="form-phonePost">32 <div class="form-pn">33 <h2 class="column-title">電話番号</h2>34 <p>エラーメッセージ</p>35 <input type="text">36 </div>37 <div class="form-postcode">38 <h2 class="column-title">郵便番号</h2>39 <p>エラーメッセージ</p>40 <input type="text">41 </div>42 </div>43 44 <div class="form-search">45 <button type="submit">検索</button>46 </div>47 </form>48</div>49 50<table class="srResult-table">51 <tr>52 <th><image class="chkBoxImage" id="allChkBox" onclick="allChange()" src="/images/square-1.jpg"></th>53 <th class="table-name">お客様名</th>54 <th class="table-bd">生年月日</th>55 <th class="table-add">住所</th>56 <th>案内フラグ</th>57 </tr>58 <tr>59 <td><image class="chkBoxImage" id="chkBox1" onclick="change1()" src="/images/chkbox_off.jpg"></image></td>60 <td>山田太郎 (ヤマダタロウ)</td>61 <td>0000/00/00</td>62 <td>XX県XX市XX町0-00-00</td>63 <td th:align=center>未</td>64 </tr>65 <tr>66 <td><image class="chkBoxImage" id="chkBox2" onclick="change2()" src="/images/chkbox_off.jpg"></image></td>67 <td>佐藤次郎 (サトウジロウ)</td>68 <td>0000/00/01</td>69 <td>XX県XX市XX町0-00-01</td>70 <td th:align=center>済</td>71 </tr>72 <tr>73 <td><image class="chkBoxImage" id="chkBox3" onclick="change3()" src="/images/chkbox_off.jpg"></image></td>74 <td>田中三郎 (タナカサブロウ)</td>75 <td>0000/00/02</td>76 <td>XX県XX市XX町0-00-02</td>77 <td th:align=center>エラー</td>78 </tr>79</table>80 81<div class="button">82 <div class="child-button">83 <button onclick="location.href='/'">戻る</button>84 <button type="submit">追加</button>85 </div>86</div>87 88 89<footer>90 <p>フッター</p>91</footer>92</body>93 94</html>
0 コメント