チェックボックスでテーブル項目の表示・非表示をしたいのにズレてしまいます。

###■やりたいこと
チェックボックスのクリックによって、該当するテーブルの列が全て消えるようにしたいです。

###■いまの状態
テーブルの上に表示させたチェックボックスをクリックして、Bにある項目（ねこ、いぬ、おにわ、おうち）も全て消えるようにしたいのです。

が、下記URLのように消えてくれません。
https://jsfiddle.net/t69ums43/

上記URLにありますが、コードはこちらです。

HTML
1<input type="checkbox"
2  onclick="document.getElementById('addr1').style.display = this.checked ? 'none' : 'block';">Bを非表示（これをクリックしてBの列が全て消えるようにしたいです。）
3  
4<table class="test" style="width: 100%;" cellspacing="0" cellpadding="0">
5  <tbody>
6   <tr>
7    <th>A</th>
8    <th style="padding: 10px;" colspan="2" id="addr1" style="display:block;">B</th>
9    <th>C</th>    
10   </tr>
11   <tr>
12    <td rowspan="2" class="waku">ぽぽぽ</td>
13    <td>ねこ</td>
14    <td>いぬ</td>
15    <td>ヤモリ</td>    
16   </tr>
17   <tr>
18    <td>おうち</td>
19    <td>おにわ</td>
20    <td>おそと</td>
21   </tr>
22  </tbody>
23</table>

CSS
1.test th {
2    border: 1px solid #FFF;
3    padding: 7px;
4    background: #000;
5    color: #FFF;
6    text-align: center;
7    vertical-align: middle;
8}
9.test td {
10    border: 1px solid black;
11    padding: 10px;
12    vertical-align: middle;
13}
14.test td {
15    border-top: none !important;
16    border-right: 1px solid #000;
17}
18.waku {
19  position: relative;
20}
21.waku a::after {
22  position: absolute;
23  width: 100%;
24  height: 100%;
25  content: "";
26  top: 0;
27  left: 0;
28  right: 0;
29  bottom: 0;
30}

###■ダメでした
Bと同じIDを４つに付ければいいんじゃないか？と思いました。

ねこ、いぬ、おにわ、おうちの

<td> を <td id="addr1" style="display:block;"> にしてみたりしたのです。 [https://jsfiddle.net/t69ums43/1/](https://jsfiddle.net/t69ums43/1/)

…けれど、サッパリうまくいってくれません。

なんでできないのでしょうか？？
お詳しい方、よろしくお願いいたします。<(_ _)>

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

回答1件

ベストアンサー

的外れかもしれませんが、以下のようにしてはいかがでしょうか？

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6    <style type="text/css">
7        .test th {
8            border: 1px solid #FFF;
9            padding: 7px;
10            background: #000;
11            color: #FFF;
12            text-align: center;
13            vertical-align: middle;
14        }
15
16        .test {
17            width: 100%;
18            border-collapse: collapse;
19            padding: 0;
20        }
21
22        .test td {
23            border: 1px solid black;
24            padding: 10px;
25            vertical-align: middle;
26        }
27
28        .test td {
29            border-top: none !important;
30            border-right: 1px solid #000;
31        }
32
33        .waku {
34            position: relative;
35        }
36
37        .waku a::after {
38            position: absolute;
39            width: 100%;
40            height: 100%;
41            content: "";
42            top: 0;
43            left: 0;
44            right: 0;
45            bottom: 0;
46        }
47
48        .th1 {
49            padding: 10px;
50            display: table-cell;
51        }
52    </style>
53</head>
54<body>
55<label>
56    <input type="checkbox" id="checkbox1">
57    Bを非表示（これをクリックしてBの列が全て消えるようにしたいです。）
58</label>
59
60<table class="test" id="table1">
61    <tbody>
62    <tr>
63        <th>A</th>
64        <th colspan="2" id="addr1" class="th1 group1">B</th>
65        <th>C</th>
66    </tr>
67    <tr>
68        <td rowspan="2" class="waku">ぽぽぽ</td>
69        <td class="group1">ねこ</td>
70        <td class="group1">いぬ</td>
71        <td>ヤモリ</td>
72    </tr>
73    <tr>
74        <td class="group1">おうち</td>
75        <td class="group1">おにわ</td>
76        <td>おそと</td>
77    </tr>
78    </tbody>
79</table>
80<script>
81    document.getElementById("checkbox1").addEventListener("change", function () {
82        var elements = document.querySelectorAll(".group1");
83        if (this.checked) {
84            for (var i = 0; i < elements.length; i++) {
85                elements[i].style.display = "none";
86            }
87        } else {
88            for (var j = 0; j < elements.length; j++) {
89                elements[j].style.display = "table-cell";
90            }
91        }
92    }, false);
93</script>
94</body>
95</html>

追記

上記のコードのうち2箇所を修正しました。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6    <style type="text/css">
7        .test th {
8            border: 1px solid #FFF;
9            padding: 7px;
10            background: #000;
11            color: #FFF;
12            text-align: center;
13            vertical-align: middle;
14        }
15
16        .test {
17            width: 100%;
18            border-collapse: collapse;
19            padding: 0;
20        }
21
22        .test td {
23            border: 1px solid black;
24            padding: 10px;
25            vertical-align: middle;
26        }
27
28        .test td {
29            border-top: none !important;
30            border-right: 1px solid #000;
31        }
32
33        .waku {
34            position: relative;
35        }
36
37        .waku a::after {
38            position: absolute;
39            width: 100%;
40            height: 100%;
41            content: "";
42            top: 0;
43            left: 0;
44            right: 0;
45            bottom: 0;
46        }
47
48        .th1 {
49            padding: 10px;
50            display: table-cell;
51        }
52    </style>
53</head>
54<body>
55<label>
56    <input type="checkbox" id="checkbox1" checked>
57    Bを非表示（これをクリックしてBの列が全て消えるようにしたいです。）
58</label>
59
60<table class="test" id="table1">
61    <tbody>
62    <tr>
63        <th>A</th>
64        <th colspan="2" id="addr1" class="th1 group1">B</th>
65        <th>C</th>
66    </tr>
67    <tr>
68        <td rowspan="2" class="waku">ぽぽぽ</td>
69        <td class="group1">ねこ</td>
70        <td class="group1">いぬ</td>
71        <td>ヤモリ</td>
72    </tr>
73    <tr>
74        <td class="group1">おうち</td>
75        <td class="group1">おにわ</td>
76        <td>おそと</td>
77    </tr>
78    </tbody>
79</table>
80<script>
81    document.getElementById("checkbox1").addEventListener("change", function () {
82        var elements = document.querySelectorAll(".group1");
83        if (!this.checked) {
84            for (var i = 0; i < elements.length; i++) {
85                elements[i].style.display = "none";
86            }
87        } else {
88            for (var j = 0; j < elements.length; j++) {
89                elements[j].style.display = "table-cell";
90            }
91        }
92    }, false);
93</script>
94</body>
95</html>

投稿2017/07/17 10:41

編集2017/07/18 08:31

s8_chu

総合スコア14731

退会済みユーザー

2017/07/17 13:35

でっきましたぁーー！ご返信遅くなってしまって申し訳ございません。助かりました。どうもありがとうございます！

退会済みユーザー

2017/07/17 18:49

ところで、逆ってできますか？(>_<) つまり、 ----- ■通常 ☞チェックありの状態でgroup1項目も全て表示されている。 ■チェックを外す ☞group1項目が消える。 ----- という逆のパターンなのですが、、じゃヴぁすくりぷとって全然わかりませぬ。。でもこれって別質問の方がよいでしょうか？