前提・実現したいこと

お世話になっております。チェックボックスとそれに付随するvalueもしくはtextContentの値を別タグ内に表示したいと考えております。※ここがクリックされているよというような案内用に考えております。
プログラミングの勉強を始めたばかりで上手い方法が思いつきません。アドバイスをいただけると大変助かります。JSで実装する方法とinputのcheckboxを組み合わせる方法など色々試しているのですが、なかなか思うような挙動になってくれません。
チェックをつける→表示、チェックを外す→表示を消すとしたいが、JSのみパターンだと、チェックを繰り返すたびに同じ項目の表示が増えていってしまうし、チェックボックスだといくつ選択しても１項目しか表示しないという感じになってしまいます。
このような処理をJS、HTML、CSSで実装することは可能でしょうか？

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="utf-8">
5    <title>practice</title>
6    <link rel="stylesheet" href="css/styles.css">
7  </head>
8  <body>
9
10    <div class="switch-menu">
11      <p class="reflect"></p>
12      <!-- チェック項目を反映させる -->
13    </div>
14    <p>JSでチェックボックスを再現する</p>
15    <div class="industry-choice">
16
17      <div class="checkbox">
18        <div class="checked"></div>
19      </div>
20      <p class="list">categoryA</p>
21    </div>
22    <div class="industry-choice">
23
24      <div class="checkbox">
25        <div class="checked"></div>
26      </div>
27      <p class="list">categoryB</p>
28    </div>
29
30      <p>チェックボックスを使う</p>
31
32        <input type="checkbox" name="c" value="AD" class="input">X
33        <input type="checkbox" name="c" value="SD" class="input">Y
34
35
36
37    <script src="js/main.js"></script>
38
39  </body>
40</html>
41
42

CSS
1body {
2width: 1400px;
3margin: 0;
4}
5
6
7
8.switch-menu {
9  width: 1400px;
10  height: 120px;
11  background: #E9EEEF;
12}
13
14
15.industry-choice {
16  display: flex;
17  height: 50px;
18
19}
20
21.flex {
22  display: flex;
23}
24
25/* チェックボックスとチェック用 */
26.checkbox {
27  border-top: 10px;
28  margin: 10px;
29  width: 16px;
30  height: 16px;
31  border: solid 2px #D9D9D9;
32}
33
34.checkin {
35  width: 8px;
36  height: 8px;
37  background: #00AED9;
38  margin: 4px;
39}
40
41.list {
42  font-size: 13px;
43  padding-top: 11px;
44  margin: 0px;
45}
46
47

JS
1'use strict';
2
3{
4
5
6  const industryList = document.querySelectorAll('.industry-list');
7  const plus = document.querySelectorAll('.plus');
8  for (let i = 0; i < plus.length; i++) {
9    plus[i].addEventListener('click', () => {
10      industryList[i].classList.toggle('hidden');
11      plus[i].textContent = plus[i].textContent === '+' ? '-' : '+';
12    });
13  }
14
15  // チェックボックスをクリックするイベント
16  const checkbox = document.querySelectorAll('.checkbox');
17  const checked = document.querySelectorAll('.checked');
18  const list = document.querySelectorAll('.list');
19  const reflect = document.querySelector('.reflect')
20  const array = [];
21
22  for (let i = 0; i < checkbox.length; i++) {
23    checkbox[i].addEventListener('click', () => {
24      checked[i].classList.toggle('checkin');
25      if (checked[i].classList.contains('checkin')) {
26        array.push(list[i].textContent);
27        reflect.textContent = array;
28      }
29    });
30  }
31
32  const input = document.querySelectorAll('.input');
33  for (let i = 0; i < input.length; i++) {
34    input[i].addEventListener('change', () => {
35      reflect.textContent = input[i].value;
36    })
37  }
38
39}
40
41

補足情報（FW/ツールのバージョンなど）

ATOM、CHROME最新

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

回答2件

ベストアンサー

こんな感じですか？

javascript
1<script>
2'use strict';
3window.addEventListener('DOMContentLoaded', ()=>{
4  [].forEach.call(document.querySelectorAll('.input'),x=>{
5    x.addEventListener('change',e=>{
6      var c=[].map.call(document.querySelectorAll('.input:checked'),x=>x.value);
7      document.querySelector('.reflect').textContent=c.join(",");
8    });
9  });
10});
11</script>
12<div class="switch-menu">
13<p class="reflect"></p>
14</div>
15<p>JSでチェックボックスを再現する</p>
16<div class="industry-choice">
17
18<div class="checkbox">
19<div class="checked"></div>
20</div>
21<p class="list">categoryA</p>
22</div>
23<div class="industry-choice">
24
25<div class="checkbox">
26<div class="checked"></div>
27</div>
28<p class="list">categoryB</p>
29</div>
30
31<p>チェックボックスを使う</p>
32
33<label><input type="checkbox" name="c" value="AD" class="input">X</label>
34<label><input type="checkbox" name="c" value="SD" class="input">Y</label>
35