チェックボックスをチェックした時にjavascriptが動くようにしたい

現在ヘッダーとメインページに同じ処理を実装しています。
処理の内容としてはチェックボックスをチェックした時にテキストボックス内にチェックボックスの値が入力されるといったものです。
※チェックボックスをチェックした時に背景色を変更することと、チェックを外した時にテキストボックスの文字を消す処理も入っています。

メインページは以下のように実装しております。
こちらは動作に特に問題ありません。

PHP
1<input type="text" id="keyword" name="keyword" size="30" disabled="disabled"/>
2<div id="material_select">
3  <div id="check-label-container">
4    <label class="check-label">
5      <span>テスト</span>
6      <input type="checkbox" name="check" value="てすと">
7      <span class="checkmark"></span>
8    </label>
9  </div>
10</div>

JavaScript
1window.onload = function() {
2	var buttons = document.getElementById('material_select').getElementsByTagName('input');
3	for ( let i = 0; i < buttons.length; i ++ ) {
4		buttons[i].onclick = function() {
5			var keyword = document.getElementById('keyword');
6			if(this.checked) {
7				keyword.value += this.value + "　";
8				buttons[i].parentNode.style.backgroundColor = '#dcdcdc';
9			} else {
10				keyword.value = keyword.value.replace(new RegExp(this.value + "　","g"),"");
11				buttons[i].parentNode.style.backgroundColor = 'white';
12			}
13		}
14	}
15}

ヘッダーの方も処理を実装しようと思ったのですが、同じようにwindow.onload = function()で実装してしまうと後に書いた方が処理されてしまい、片方しか動かなくなります（当たり前ですが...）

そのため、ヘッダーは以下のように実装を試みました。

PHP
1<input type="text" id=" header-keyword" name="header-keyword" size="30" disabled="disabled"/>
2<div id="header_material_select">
3  <div id="check-label-container">
4    <label class="check-label">
5      <span>テスト</span>
6      <input type="checkbox" name="check" value="てすと" onclick="javaScript:header_value_get(this)">>
7      <span class="checkmark"></span>
8    </label>
9  </div>
10</div>

JavaScript
1function header_value_get() {
2	console.log("テスト");
3	var header_buttons = document.getElementById('header_material_select').getElementsByTagName('input');
4	console.log("テスト2");
5	for ( let i = 0; i < header_buttons.length; i ++ ) {
6		header_buttons[i].onclick = function header_value_get() {
7			console.log("テスト3");
8			var keyword = document.getElementById('header-keyword');
9			if(check.checked) {
10				console.log("テスト4");
11				keyword.value += this.value + "　";
12				header_buttons[i].parentNode.style.backgroundColor = '#dcdcdc';
13			} else {
14				console.log("テスト5");
15				keyword.value = keyword.value.replace(new RegExp(this.value + "　","g"),"");
16				header_buttons[i].parentNode.style.backgroundColor = 'white';
17			}
18		}
19	}
20}

こちらを動作させ、コンソールを確認すると以下のように出力されます。
~~最初のチェック（チェックを入れる）~~
テスト
テスト2

~~2回目のチェック（チェックを外す）~~
テスト3
テスト5

~~3回目のチェック（チェックを入れる）~~
テスト3
テスト4

このように一回チェックを入れてから外すという動作を挟まないと本来動いて欲しい処理に分岐してくれません。

ここの処理をどのように工夫すればヘッダー側も正しい動作になってくれるでしょうか...
お知恵を貸していただきたいです。

分かりにくい説明となってしまい、また質問タイトルも適切に書けておらず大変申し訳ありません。

不明点などありましたら追記・修正しますのでよろしくお願いします。

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

回答2件

ベストアンサー

jQuery 使って良いんですよね。

window.onload じゃなくて
$(function() { }); で書いたら良さそうに思いますが、どうでしょうか。

javascript
1<html>
2<head>
3<meta charset="utf-8">
4<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
5</head>
6
7<!--
8  以下はとりあえずなので同一ファイル内に書いていますが
9  実際にはヘッダーの方のファイルに書いて良いです
10-->
11<script>
12  $(function() {
13
14    // ヘッダーのチェックボックスがクリックされた時の処理
15    $("#test-header input[type='checkbox']").on("click", function() {
16
17        alert("☆HEADER のチェックボックスがクリックされました☆");
18
19    });
20    
21  })
22</script>
23
24<!--
25  以下はとりあえずなので同一ファイル内に書いていますが
26  実際にはメインの方のファイルに書いて良いです
27-->
28<script>
29  $(function() {
30
31    // メインのチェックボックスがクリックされた時の処理
32    $("#test-main input[type='checkbox']").on("click", function() {
33
34        alert("★MAIN のチェックボックスがクリックされました★");
35
36    });
37    
38  })
39</script>
40<body>
41
42  <div id="test-header" style="background:#0ff;">
43    <input type="checkbox" />
44    へっだー
45  </div>
46
47  <div id="test-main" style="background:#ff0;">
48    <input type="checkbox" />
49    めいん
50  </div>
51
52</body>
53</html>