チェックボックスを利用して、特定の行を表示/非表示にするやり方

Question

以下のひらがな5つと数字5つを対応させたテーブルに、チェックボタンを用いて、チェックが入っているに該当する行のみを表示し、チェックがついていないものは非表示という操作をしたいです。

【例.か/3/5 の3つのボックスにチェックが入っていれば、上から2,3,5行目が表示され、2,4行目はhideされる】

<div id="select">
<label><input id="agyou" class="agyou" type="checkbox" value="agyou" />あ</label>
<label><input id="kagyou" class="kagyou" type="checkbox" value="kagyou" />か</label>
<label><input id="sagyou" class="sagyou" type="checkbox" value="sagyou" />さ</label>
<label><input id="tagyou" class="tagyou" type="checkbox" value="tagyou" />た</label>
<label><input id="nagyou" class="nagyou" type="checkbox" value="nagyou" />な</label>
<label><input id="1" class=" 1" type="checkbox" value="1" />1</label>
<label><input id="2" class="2" type="checkbox" value="2" />2</label>
<label><input id="3" class="3" type="checkbox" value="3" />3</label>
<label><input id="4" class="4" type="checkbox" value="4" />4</label>
<label><input id="5" class="5" type="checkbox" value="5" />5</label>
</div>

<table id="result">
<tbody>
<thead>
<tr>
<th>text</th>
<th>num</th>
</tr>
</thead>
<tr>
<td class="agyou">あ</td>
<td class="1">1</td>
</tr>
<tr>
<td class="kagyou">か</td>
<td class="2">2</td>
</tr>
<tr>
<td class="sagyou">さ</td>
<td class="3">3</td>
</tr>
<tr>
<td class="tagyou">た</td>
<td class="4">4</td>
</tr>
<tr>
<td class="nagyou">な</td>
<td class="5">5</td>
</tr>
</tbody>
</table>

※上記テーブルはサンプルで作成したものですが、実際には2000行くらいのテーブルで、tdへのclass付与はjqueryでswich文とaddClassでしています。(tdの1列目が「あ」なら、addClass("agyou")のような感じ)テーブルの操作はデータベースからシステムで生成したいため手作業では行えないと仮定してください。

tdのクラスを見て、チェックボックスと連動させてフィルタリングする方法を、jQueryで教えて頂けるとありがたいです！当方初心者のため、なるべく難しい構文は避けてもらえるとなお助かります。。。

Comments

[m.ts10806]

https://teratail.com/help/question-tips#questionTips1 まず、やりたいことを小分けにして（つまり仕様です）ひとつひとつ調べてコードに起こしていってください。初心者であるなら初心者マークを利用すべきですが、質問の前に初心者でもできることはあります。

[m.ts10806]

コードを回答するのは簡単ですが（それでも数分でできる量ではおそらくないはず）、そのコードを理解できるかどうか分からないのに提示するのを躊躇う回答者も多いです。つまり丸投げな上に、難しい構文は・・・という条件が多すぎる質問内容に回答は付きにくいでしょう。

[yambejp]

tdのclassをみて調整する場合、非表示になるのはそのtd内のテキストだけという意味でしょうか？普通はtrにclassをつけて行ごと非表示にしませんか？

[qzkb4g1010]

trにクラスをつけて行ごと非表示でだいじょうぶです!

Answer 1

  $(document).on('change', 'form', function(event) {
    var result = $('#result');
    result.find('tbody tr').hide();

    if ($('#agyou').prop('checked')) {
      result.find('.agyou').closest('tr').show();
    }
    // 以下略。
  });

パフォーマンスに問題がある場合、trにデータを持たせ、動的にスタイルルールを変更したほうがいいかもしれません。

Comments

[x_x]

あ、勝手にformがあるものとして書いてます。念のため