javascriptを用いて、チェックボックスによってhtml上の表の任意の行を表示/非表示させたいです。

前提・実現したいこと

htmlとjavascriptを用いて、
チェックボックスのオンオフによって表の任意の行を表示/非表示させたいです。
jsの方で、trのIDを用いて該当の行を取得し動作させたいです。

該当のソースコード

html
1修正前
2<form name="form1">
3      <input checked type="checkbox" id="check1" onClick="displayTR_checkbox(this,'tr1');"><label for="check1">tr1</label><br>
4  　　 <input checked type="checkbox" id="check2" onClick="displayTR_checkbox(this,'tr2');"><label for="check2">tr2</label>
5  
6      <table class="picTable">
7        <tr id="tr1">
8          <td><img src="http://placehold.jp/150x150.png"></td>
9          <td><img src="http://placehold.jp/150x150.png"></td>
10          <td><img src="http://placehold.jp/150x150.png"></td>
11        </tr>
12        <tr id="tr2">
13          <td><img src="http://placehold.jp/150x150.png"></td>
14          <td><img src="http://placehold.jp/150x150.png"></td>
15          <td><img src="http://placehold.jp/150x150.png"></td>
16        </tr>
17      </table>
18    </form>
19
20修正後
21<form name="form1">
22      <input checked type="checkbox" id="check1" onClick="displayTR_checkbox('check1','tr1');"><label for="check1">tr1</label><br>
23  <input checked type="checkbox" id="check2" onClick="displayTR_checkbox('check2','tr2');"><label for="check2">tr2</label>
24  
25      <table class="picTable">
26        <tr id="tr1">
27          <td><img src="http://placehold.jp/150x150.png"></td>
28          <td><img src="http://placehold.jp/150x150.png"></td>
29          <td><img src="http://placehold.jp/150x150.png"></td>
30        </tr>
31        <tr id="tr2">
32          <td><img src="http://placehold.jp/150x150.png"></td>
33          <td><img src="http://placehold.jp/150x150.png"></td>
34          <td><img src="http://placehold.jp/150x150.png"></td>
35        </tr>
36      </table>
37    </form>

javascript
1修正前
2function displayTR_checkbox(this,trID){
3  var TR = document.getElementById(trID);
4  if(checkbox.checked = false){
5    TR.style.display = none;
6  } else {
7    TR.style.display = block;
8  }
9}
10修正後
11function displayTR_checkbox(checkboxID,trID){
12  var TR = document.getElementById(trID);
13  var Checkbox = document.getElementById(checkboxID);
14  if(! Checkbox.checked){
15    TR.style.display = '';
16  } else {
17    TR.style.display = 'none';
18  }
19}

試したこと

cssの方が複雑になってきたため、今回行の表示/非表示はjsで行いたいです。
知識不足で大変申し訳ございませんが、助言いただけましたら幸いです。

miyabi_pudding

2020/12/21 19:05

質問のソースコードで問題なく動くと思うのですが、理想の挙動にならないのでしょうか？

babu_babu_baboo

2020/12/21 19:43

× if(checkbox.checked = false){ 〇 if(! checkbox.checked){

m.ts10806

2020/12/21 21:18

miyabi_takatsukさん >質問のソースコードで問題なく動くと思うのですがエラー出てるので動かないかと。（Chrome,Firefox）

yambejp

2020/12/22 01:36

ほぼほぼ、以前ご自身で質問された https://teratail.com/questions/311223 で解決できませんか？

20200713

2020/12/22 07:03

皆様助言いただきありがとうございます。以前の質問https://teratail.com/questions/311223で問題自体は解決したのですが、チェックボックスのオンオフによる関数？としてJavascriptに記載したく改めて別の質問として投稿させていただきました。

miyabi_pudding

2020/12/22 08:11

m.ts10806さん > 細かく確認してなかった… なるほどです。

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

回答2件

ベストアンサー

関数の定義側の引数に「this」はNG。エラー：SyntaxError: missing formal parameter

JavaScriptの予約語でもあるので「変数名」として使えません。別の変数名に置き換えてください。
0. =だと代入しているだけ。if(checkbox.checked = false){ 「条件式」としては成り立つのでエラーにはなりません
0. checkboxという変数はどこから出てきた？
ここはおそらく渡した「自身」のチェックボックス要素をおさめた変数が入るはず
0. block noneという変数はどこから出てきた？
どこにも定義していないならあくまでプロパティでここの定義は「文字列」になるはず

未チェックから入った場合に見た目がおかしくなる指定（trに対するdisplay:block）もあるのはありますが、
これでそれっぽく動くようになります（手元のChrome,Firefoxで確認済み）。

まずは、エラー確認とデバッグを癖づけるようにしてください。

投稿2020/12/21 21:32

編集2020/12/21 21:32

m.ts10806

総合スコア80875

m.ts10806

2020/12/21 21:33

なお、実際に要件通りできあがる回答となっているので間違っている点ありましたら何も考え無しに低評価押す前にコメントでご指摘ください。

20200713

2020/12/22 07:23

回答いただきありがとうございます。１. 以前他の方のコードにて自分自身のタグを呼び出す際に'this'と表記されているものがあったので使っておりましたが、避けるよう気をつけます。２. ３. ４.について修正しましたところ無事正しい動作になりました！感謝致します。コードのエディターとしてmac, atomを利用しているのですが、これまでhtml等さわる際は正しく表示されるかのみで、エラー確認やデバッグを行うことありませんでした。参考に伺えましたら嬉しいのですが、自分の環境でhtml, css, javascriptを勉強するのにおすすめのエディターなどございますでしょうか？当初の質問から脱線した内容で大変申し訳ございませんがお教えいただけましたら嬉しいです…！

miyabi_pudding

2020/12/22 08:13 編集

横槍失礼します。 > 自分の環境でhtml, css, javascriptを勉強するのにおすすめのエディターなどございますでしょうか？は、まず自分で調べて、どうしてもわからなければ、別質問立てましょう。コメントの応答で扱い切れる話題ではありません。

20200713

2020/12/22 08:59

参考に伺えたらという思いで失礼いたしました… 自分の方でもう少し調べてみます！ご助言いただきありがとうございます！迅速に解決していただけましたのでこの度はこちらをベストアンサーにさせていただきます。

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

tr要素のdisplay は、''ではなく、'table-row'

js
1<form name="form1">
2  <p>
3    <label><input checked type="checkbox" name="hoge0" value="0">tr0</label><br>
4    <label><input checked type="checkbox" name="hoge0" value="1">tr1</label>
5  </p>
6
7  <table class="picTable">
8    <tr>
9      <td><img src="http://placehold.jp/150x150.png">
10      <td><img src="http://placehold.jp/150x150.png">
11      <td><img src="http://placehold.jp/150x150.png">
12    <tr>
13      <td><img src="http://placehold.jp/150x150.png">
14      <td><img src="http://placehold.jp/150x150.png">
15      <td><img src="http://placehold.jp/150x150.png">
16    </tr>
17  </table>
18</form>
19
20<script>
21
22function displayTR_checkbox(rowIndex, checked){
23  const table = document.querySelector ('table.picTable');
24  let TR = table.rows[rowIndex];
25  TR.style.display = checked ? 'table-row': 'none';
26}
27
28function handler ({target:e}) {
29  if (/^hoge\d*$/.test (e.name))
30    displayTR_checkbox (e.value, e.checked);
31}
32
33document.querySelector ('form').addEventListener ('click', handler, false);
34</script>
35
36