jQuery：チェックボックスで取得した文字列をチェックした順番に他の表に表示させる関数について

group1のチェックボックスにチェックを入れると、文字列を配列ordersに取得し、配列番号の文字列をshow1~3に表示させたく以下のコードを書きました。文字列がordersに格納されておらず、どなたか原因が分かる方はいらっしゃいませんか。

jQuery
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="utf-8">
5    <title></title>
6    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
7    <script>
8    $(function() {
9       $('.group input[type="checkbox"]').on("change", function () {
10         var orders = [];
11         $('.group input:checked').each(function () {
12          orders.push($(this).parent().text());
13          console.log(orders);
14        });
15
16        $("#show1").text(orders[0]);
17        $("#show2").text(orders[1]);
18        $("#show3").text(orders[2]);
19        $("#show4").text(orders[3]);
20         });
21
22    　　　 
23
24
25
26    </script>
27</head>
28<body>
29 <div class="top">
30
31   <div class="top_graph">
32     <table border="" class = "graph">
33    <tr>
34        <th colspan=1 height="10%" width = "10%"></th>
35        <th colspan=2 height="10%" width = "90%">/th>
36    </tr>
37      <tr align="center" class = "skill">
38            <td width = "10%">
39
40            </td>
41            <td width = "10%">1</td>
42            <td width = "90%" id="show1">
43
44            </td>
45      </tr> 
46      <tr align="center" class = "skill">
47            <td width = "10%">
48
49            </td>
50            <td width = "10%">2</td>
51            <td width = "90%" id="show2">
52
53            </td>
54      </tr> 
55      <tr align="center">
56            <td width = "10%">
57
58            </td>
59            <td width = "10%">3</td>
60            <td width = "90%" id="show3">
61
62            </td>
63      </tr> 
64      <tr align="center">
65            <td width = "10%">
66
67            </td>
68            <td width = "10%">4</td>
69            <td width = "90%" id="show4">
70
71            </td>
72      </tr> 
73
74  </table>
75  </div>
76  </div>
77  <div class ="group">
78    <div class= "group1">
79    <table border="" width="840px" height="700" class = "graph_s">
80        <tr><th colspan=6 height="10%" ></th></tr>
81        <tr width="16%" height="10%">
82            <th></th><th></th><th></th><th>
83            </th><th></th><th></th>
84        </tr>
85        <tr align="center">
86            <td>
87                <label><input type="checkbox" class="G1" value="0.1" >aaa</label>
88            </td>
89            <td>
90               <label><input type="checkbox" class="G1" value="0.2" >bbb</label>
91            </td>
92            <td>
93               <label><input type="checkbox" class="G1" value="0.3" >ccc</label>
94            <td>
95               <label><input type="checkbox" class="G1" value="0.4" >ddd</label>
96            </td>
97            <td>
98               <label><input type="checkbox" class="G1" value="0.5" >eee</label>
99            </td>
100            <td>
101                <label><input type="checkbox" class="G1" value="0.6" >fff</label>
102            </td>
103        </tr>
104
105    </table>
106</div>
107</div>
108<script src="script.js"></script>
109</body>
110</html>
111

gentaro

2019/06/17 16:05

まずエラーの内容を書いてないのがよろしくないのですが、もう一つ言えばエラーの内容をご自分で調べた上で、何がどうわからないのかを質問されないと、ただ「間違い探しをしてくれ」と言ってるのと同等です。（ここではルール違反になります）

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

回答1件

ベストアンサー

わからない箇所をもう少し絞って質問してください

命題を「チェックボックスで取得した文字列をチェックした順番に他の表に表示させる」
に絞る場合、こんな感じ

javascript
1
2<script>
3if(!Set.prototype.toggle) Set.prototype.toggle=function(x){
4  this.has(x) && this.delete(x) || this.add(x);
5}
6window.addEventListener('DOMContentLoaded', function(e){
7  var hoge=new Set();
8  [].forEach.call(document.querySelectorAll('.hoge'),function(x){
9    x.addEventListener('change',function(e){
10      hoge.toggle(e.target.value);
11      var v=[];
12      hoge.forEach(x=>{v.push(x)});
13      document.querySelector('#fuga').textContent=v;
14    });
15  });
16});
17</script>
18<label><input type="checkbox" class="hoge" value="a">a</label>
19<label><input type="checkbox" class="hoge" value="b">b</label>
20<label><input type="checkbox" class="hoge" value="c">c</label>
21<label><input type="checkbox" class="hoge" value="d">d</label>
22<label><input type="checkbox" class="hoge" value="e">e</label>
23<label><input type="checkbox" class="hoge" value="f">f</label>
24<div id="fuga"></div>