checkboxのクリックで任意のdivの表示・非表示を切り替えたいです。

Question

前提・実現したいこと

checkboxのクリックで任意のdivの表示・非表示を切り替えたいです。
以下のように設定してみましたがうまく切り替えられず、
間違っている部分などございましたらご指摘いただけたら幸いです。

発生している問題・エラーメッセージ

チェックボックスをクリックしても該当のdiv部分が非表示にならない上、
チェックボックスのチェックも切り替わりません。

該当のソースコード

<input type="checkbox" id="checkbox_1" checked="checked" onclick="click_display_div('checkbox_1','test')">
<label for="checkbox_1">checkbox1</label>

<table>
  <div id="test">
    <tr><p>tr1</p></tr>
    <tr><p>tr2</p></tr>
  </div>
  <tr><p>tr3</p></tr>
</table>

function click_display_div(checkboxID, divID) {
  var CB = document.getElementById(checkboxID);
  var DIV = document.getElementById(divID);
  if (CB.checked = true) {
    DIV.style.display = none;
    CB.checked = false;
  } else {
    DIV.style.display = block;
    CB.checked = true;
  }
}

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

初歩的な問題で大変申し訳ございませんが、
何かアドバイスいただけましたら幸いです。

追記
コメントいただきました方法でも上記のコードでは機能しないのは、
テーブル内にdivを置くこと自体が間違っているのでしょうか。
任意のtr一つ一つの表示切り替えを行う部分が既にあるため、
今回のチェックボックスでは複数行をまとめて表示切り替えを行いたいです。

Answer 1

ご参考までに、
この案件なら、jsを使わなくてもCSSだけで可能です。

<input type="checkbox" id="checkbox_1" checked="checked"/>
<label for="checkbox_1">checkbox1</label>
<table>
  <tr class="test">
    <td>tr1</td>
  </tr>
  <tr class="test">
    <td>tr2</td>
  </tr>
  <tr>
    <td>tr3</td>
  </tr>
</table>

#checkbox_1:checked ~ table tr.test {
  display: none;
}

一般兄弟結合子~ を使うのがミソです。

Comments

[20200713]

ご対応ありがとうございました！
参考にさせていただきます。

Answer 2

修正点を箇条書きでお伝えします。

• チェックボックスのチェックをつけ外しした際に関数を実行する場合は、onclickでなくonchangeです。
• チェックボックスをクリックした時点でチェックボックスの値は変わるので、JSの6行目（CB.checked = false;）、9行目（CB.checked = true;）は不要です。
• （4行目）CB.checkedがtrueかどうかを返したいときは、CB.checked == true;が正解です。（=は代入演算子です）
• （5行目、8行目）none, blockは文字列ですので、''または""で括る必要があります。（括弧なしでnoneと書いてしまうと、noneという名前の変数という意味になってしまいます）

以上の点を修正して、ソースは下記のようになります。

<input type="checkbox" id="checkbox_1" checked="checked" onchange="click_display_div('checkbox_1','test')">
<label for="checkbox_1">checkbox1</label>
<div id="test">
 <p>test</p>
</div>

function click_display_div(checkboxID, divID) {
  var CB = document.getElementById(checkboxID);
  var DIV = document.getElementById(divID);
  if (CB.checked == true) {
    DIV.style.display = 'none';
  } else {
    DIV.style.display = 'block';
  }
}

Comments

[20200713]

不明だった点、的確にお教えいただき本当にありがとうございます！
radioボタンもcheckboxもonclickで処理していたため、大変参考になりました…！
実際に実装を予定していた、表示を切り替えるdiv部分はテーブルの中に入っており、
そのようなコードの場合は切り替えができない状況です。

これは、テーブルの中にdivを置くこと自体間違っているのでしょうか。

[hallen0225]

おっしゃる通り、tableの中にdivを置くのはHTMLとして間違っています。（ブラウザで正しく処理されません）
今回は、代替案として、表示を切り替えたいtr要素にclass名を付ける方法で対応してみました。
（idは一つのページ内で重複しないようにする必要があるので。class名は、同じclass名の要素が複数あっても構いません）
なお、tr要素の下には、p要素でなくtd要素（trは表の行、tdは表のセルのことです）が必要ですので、そちらも修正してあります。
（また、"CB"のような略語は、他の人が見たときに分かりづらい恐れがあるので、一般的な略称の「chkbox」に改めました。）

コードは下記のようになります。
（コメント欄ではインデントが無視されてしまうため、見づらくなってしまいますがご容赦ください。）

HTML
<input
type="checkbox"
id="checkbox_1"
checked="checked"
onclick="click_display_div('checkbox_1','test')"
/>
<label for="checkbox_1">checkbox1</label>
<table>
<tr class="test">
<td>tr1</td>
</tr>
<tr class="test">
<td>tr2</td>
</tr>
<tr>
<td>tr3</td>
</tr>
</table>

JS
function click_display_div(chkboxID, className) {
var chkbox= document.getElementById(chkboxID);
var tableRows = document.querySelectorAll("." + className);
if (chkbox.checked == true) {
tableRows.forEach((element) => (element.style.display = "none"));
} else {
tableRows.forEach((element) => (element.style.display = "block"));
}
}

[20200713]

お返事いただきありがとうございます！
trに既にクラスを指定していたため、複数クラスとしてtestも追加しましたところ、
表示のオンオフ切り替えによってテーブルの内容物の体裁が崩れてしまいました。

また、既にtrに割り振っているIDによって表示切り替えを別の箇所で行なっているのですが
classによるオンオフとIDによるオンオフはどちらが優先されるなど順番はあるのでしょうか…？
重ねての質問申し訳ございません。
もしも可能でしたらご助言いただけましたら幸いです。

[hallen0225]

表示切替が複数種類あるとなるとまったく話が変わってきてしまいますね、、
処理としては、先に表示対象を絞り込んで、表示対象のtr要素にはdisplay:block、非表示のtr要素にはdisplay: noneを当てる、といったようなことになると思われます。
こうなってくると、申し訳ないのですが、実際の要件やHTMLソースが分からない以上具体的なことは申し上げられません。

>> classによるオンオフとIDによるオンオフはどちらが優先されるなど順番はあるのでしょうか…？
これらは独立しているものではないので、全面的に「どう作るか」次第ということになると思われます。

[20200713]

なるほどです。
詳しくお答えくださりありがとうございました！
表示切り替えが複数の場合について、指定方法をまた改めてご質問させていただきますので、
宜しければその際またご相談できましたら嬉しいです。

当初の質問内容については動作確認できましたので、
こちら一度解決とさせていただきます！ありがとうございました。