チェックボックスと文字入力によるtableの絞り込みについて

前提・実現したいこと

JavaScriptを勉強中で、
チェックボックスと文字入力によるtableの絞り込みを実現したいと思っています。
サイトに掲載されていたコードを使用させていただき書き換えていますが
次のことを実現するためにどのように書き換えたらよいかわからないため、
ご指示をいただけないでしょうか。

初期状態はチェックボックスにチェックが入っていない状態でリストをすべて表示
チェックやキーワードを入れると該当のリストのみ絞り込み表示
絞り込みで、チェック項目「間取り」「築年数」「階」で選択されている項目がなくても、その他のチェック項目にチェックがある場合や文字入力がある場合は該当するリストを表示する

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

チェックボックスにチェックを入れるとすべて非表示になる、チェックを外してもすべて表示されず全て非表示状態

該当のソースコード

<!DOCTYPE html> <html lang="ja"> <style> table th,td,tr{ border: 1px solid gray; width: 100px; } </style> <body> <h1 style="padding-left: 10px;">物件検索</h1> <div class="search-box"> <span class="search-box_label">間取り:</span> <li><label><input type="checkbox" class="checkbox-input1" name="kubn" value="1LDK">1LDK</label></li> <li><label><input type="checkbox" class="checkbox-input1" name="kubn" value="2LDK">2LDK</label></li> <li><label><input type="checkbox" class="checkbox-input1" name="kubn" value="3LDK">3LDK</label></li> <li><label><input type="checkbox" class="checkbox-input1" name="kubn" value="4LDK">4LDK</label></li> </div> <div class="search-box"> <span class="search-box_label">築年数:</span> <li><label><input type="checkbox" class="checkbox-input1" name="level" value="3年未満">3年未満</label></li> <li><label><input type="checkbox" class="checkbox-input1" name="level" value="5年未満">5年未満</label></li> <li><label><input type="checkbox" class="checkbox-input1" name="level" value="10年未満">10年未満</label></li> </div> <div class="search-box"> <span class="search-box_label">階:</span> <li><label><input type="checkbox" class="checkbox-input1" name="kai" value="1階">1階</label></li> <li><label><input type="checkbox" class="checkbox-input1" name="kai" value="2階">2階</label></li> <li><label><input type="checkbox" class="checkbox-input1" name="kai" value="3階">3階</label></li> <li><label><input type="checkbox" class="checkbox-input1" name="kai" value="4階">4階</label></li> <li><label><input type="checkbox" class="checkbox-input1" name="kai" value="5階">5階</label></li> </div> <input type="text" class="tac inCenter" id="search-text" placeholder="文字を入力">

<table id="abcd" class="target-area" style="border-collapse: collapse">
    <thead>
      <tr class="emp_index">
        <th class="sort" data-sort="All_kubun">間取り</th>
        <th class="sort" data-sort="All_houi">方角</th>
        <th class="sort" data-sort="All_kai">階</th>
        <th class="sort" data-sort="All_toho">徒歩</th>
        <th class="sort" data-sort="All_level">築年数</th>
        <th class="sort" data-sort="All_yacin">家賃</th>
        <th class="sort" data-sort="All_sonota">その他</th>
      </tr>
    </thead>
<tbody class="list">
    <tr class="">
    <td class="All_kubn">1LDK</td>
    <td class="All_houi">南東</td>
    <td class="All_kai">4F</td>
    <td class="All_toho">3分</td>
    <td class="All_level">3年未満</td>
    <td class="All_yacin"> 6万</td>
    <td class="All_sonota">バストイレ別</td>
    </tr>
    <tr class="">
        <td class="All_kubn">2LDK</td>
        <td class="All_houi">東</td>
        <td class="All_kai">3F</td>
        <td class="All_toho">20分</td>
        <td class="All_level">5年未満</td>
        <td class="All_yacin">10万</td>
        <td class="All_sonota">システムキッチン/バストイレ別</td>
    </tr>
    <tr class="">
        <td class="All_kubn">4LDK</td>
        <td class="All_houi">北</td>
        <td class="All_kai">1F</td>
        <td class="All_toho">1分</td>
        <td class="All_level">3年未満</td>
        <td class="All_yacin">5万</td>
        <td class="All_sonota">床暖房</td>
    </tr>
    <tr class="">
        <td class="All_kubn">6LDK</td>
        <td class="All_houi">東南</td>
        <td class="All_kai">5F</td>
        <td class="All_toho">5分</td>
        <td class="All_level">3年未満</td>
        <td class="All_yacin">15万</td>
        <td class="All_sonota">ペット可</td>
    </tr>

</tbody>

</table> <script src="js/jquery-3.6.0.min.js"></script> <script> $(function() { $("input").on("input change", function() { var kubn = $("[name=kubn]:checked").map(function() { return $(this).val(); }).get(); console.log(kubn); var level = $("[name=level]:checked").map(function() { return $(this).val(); }).get(); console.log(level); var kai = $("[name=kai]:checked").map(function() { return $(this).val(); }).get(); console.log(kai); var name = $("#search-text").val(); console.log(name); $("#abcd tbody tr").each(function() { var reg=new RegExp(name); if ($.inArray($(this).find("td.All_kubn").text(),kubn) >= 0 && $.inArray( $(this).find("td.All_level").text(),level) >= 0 && $.inArray( $(this).find("td.All_kai").text(),kai) >= 0 && (name=="" || //文字入力がnull または　各 reg.test($(this).find("td.All_kubn").text()) || reg.test($(this).find("td.All_lever").text()) || reg.test($(this).find("td.All_houi").text()) || reg.test($(this).find("td.All_kai").text()) || reg.test($(this).find("td.All_toho").text()) || reg.test($(this).find("td.All_yacin").text()) || reg.test($(this).find("td.All_sonota").text()) ) ){ $(this).show(); } else { $(this).hide(); } }); }); $(":checkbox").prop("checked", false); }); </script> </body> </html>


### 試したこと

流用元のコードは初期状態がチェックボックスが入っている状態で、すべてのリストを表示する状態でした。
そこで、以下のようにコードを書き換えました。

元　　　　$(":checkbox").prop("checked", true).eq(0).trigger('change');
書き換え　$(":checkbox").prop("checked", false);

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

ここにより詳細な情報を記載してください。

yambejp

2021/07/12 00:26 編集

間取・築年数・階の条件はand/or検索どちらですか？（それぞれの項目内ではor検索だとして）また普通はテーブルを絞り込むのではなくデータを絞り込んでからテーブルを描画するものでは？

hitagi

2021/07/12 12:15

お返事をありがとうございます。間取、築年数、階の条件はand検索dす。チェックがない項目がある場合はチェックが入っている項目で検索をして表示したいです。テーブルについてのご指摘もありがとうございます。知識不足で筋違いな事を言ってるかもしれないのですが、要素を表示非表示にするのではなく、データを絞り込んで該当データのみをテーブルに描画ができたらと思っています。実際の物件データは膨大なためcsvで読み込み、tableの形で出力しています。

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

回答1件

ベストアンサー

絞り込みで、チェック項目「間取り」「築年数」「階」で選択されている項目がなくても、その他のチェック項目にチェックがある場合や文字入力がある場合は該当するリストを表示する

こちらついてはいまいち読み取れなかったので、チェックと文字入力の兼ね合い（優先度など）についてはあまり考慮していません。

ソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3  <style>
4    table th,
5    td,
6    tr {
7      border: 1px solid gray;
8      width: 100px;
9    }
10
11  </style>
12
13  <body>
14    <h1 style="padding-left: 10px;">物件検索</h1>
15
16    <div class="search-box">
17      <span class="search-box_label">間取り:</span>
18      <li><label><input type="checkbox" class="checkbox-input1" name="kubn" value="1LDK">1LDK</label></li>
19      <li><label><input type="checkbox" class="checkbox-input1" name="kubn" value="2LDK">2LDK</label></li>
20      <li><label><input type="checkbox" class="checkbox-input1" name="kubn" value="3LDK">3LDK</label></li>
21      <li><label><input type="checkbox" class="checkbox-input1" name="kubn" value="4LDK">4LDK</label></li>
22    </div>
23    <div class="search-box">
24      <span class="search-box_label">築年数:</span>
25      <li><label><input type="checkbox" class="checkbox-input1" name="level" value="3年未満">3年未満</label></li>
26      <li><label><input type="checkbox" class="checkbox-input1" name="level" value="5年未満">5年未満</label></li>
27      <li><label><input type="checkbox" class="checkbox-input1" name="level" value="10年未満">10年未満</label></li>
28    </div>
29    <div class="search-box">
30      <span class="search-box_label">階:</span>
31      <!-- 1階→1F -->
32      <li><label><input type="checkbox" class="checkbox-input1" name="kai" value="1F">1階</label></li>
33      <li><label><input type="checkbox" class="checkbox-input1" name="kai" value="2F">2階</label></li>
34      <li><label><input type="checkbox" class="checkbox-input1" name="kai" value="3F">3階</label></li>
35      <li><label><input type="checkbox" class="checkbox-input1" name="kai" value="4F">4階</label></li>
36      <li><label><input type="checkbox" class="checkbox-input1" name="kai" value="5F">5階</label></li>
37
38    </div>
39    <input type="text" class="tac inCenter" id="search-text" placeholder="文字を入力">
40
41    <!--★　チェックボックス　表示-->
42
43    <!--★　CSVデータtable 表示-->
44
45    <table id="abcd" class="target-area" style="border-collapse: collapse">
46      <thead>
47        <tr class="emp_index">
48          <th class="sort" data-sort="All_kubun">間取り</th>
49          <th class="sort" data-sort="All_houi">方角</th>
50          <th class="sort" data-sort="All_kai">階</th>
51          <th class="sort" data-sort="All_toho">徒歩</th>
52          <th class="sort" data-sort="All_level">築年数</th>
53          <th class="sort" data-sort="All_yacin">家賃</th>
54          <th class="sort" data-sort="All_sonota">その他</th>
55        </tr>
56      </thead>
57      <tbody class="list">
58        <tr class="">
59          <td class="All_kubn">1LDK</td>
60          <td class="All_houi">南東</td>
61          <td class="All_kai">4F</td>
62          <td class="All_toho">3分</td>
63          <td class="All_level">3年未満</td>
64          <td class="All_yacin"> 6万</td>
65          <td class="All_sonota">バストイレ別</td>
66        </tr>
67        <tr class="">
68          <td class="All_kubn">2LDK</td>
69          <td class="All_houi">東</td>
70          <td class="All_kai">3F</td>
71          <td class="All_toho">20分</td>
72          <td class="All_level">5年未満</td>
73          <td class="All_yacin">10万</td>
74          <td class="All_sonota">システムキッチン/バストイレ別</td>
75        </tr>
76        <tr class="">
77          <td class="All_kubn">4LDK</td>
78          <td class="All_houi">北</td>
79          <td class="All_kai">1F</td>
80          <td class="All_toho">1分</td>
81          <td class="All_level">3年未満</td>
82          <td class="All_yacin">5万</td>
83          <td class="All_sonota">床暖房</td>
84        </tr>
85        <tr class="">
86          <td class="All_kubn">6LDK</td>
87          <td class="All_houi">東南</td>
88          <td class="All_kai">5F</td>
89          <td class="All_toho">5分</td>
90          <td class="All_level">3年未満</td>
91          <td class="All_yacin">15万</td>
92          <td class="All_sonota">ペット可</td>
93        </tr>
94
95      </tbody>
96    </table>
97    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
98  </body>
99</html>

javascript
1// チェックボックスの取得
2const getCheckBox = (searchElem) =>
3  $(searchElem).map(function() {
4    return $(this).val()
5  }).get();
6
7// 入力とのマッチチェック関数
8const textMatched = (elem, searchElm, name) => {
9  const reg = new RegExp(name);
10  return reg.test($(elem).find(searchElm).text())
11}
12
13// checkBoxとのマッチチェック関数
14const checkBoxMatched = (elm, searchElm, arr) => {
15  // 全部のチェックが外れていたらtrue
16  return ($.inArray($(elm).find(searchElm).text(), arr) >= 0) || arr.length == 0
17}
18
19
20$(function() {
21  $("input").on("input", function() {
22    // チェックされているチェックボックスを取得
23    var kubn = getCheckBox("[name=kubn]:checked")
24    var level = getCheckBox("[name=level]:checked")
25    var kai = getCheckBox("[name=kai]:checked")
26
27    // 入力文字
28    var name = $("#search-text").val();
29
30    // 文字判定用配列
31    const matchTextArray = [
32      'td.All_kubn', 'td.All_level', 'td.All_houi', 'td.All_kai', 'td.All_toho', 'td.All_yacin', 'td.All_sonota'
33    ]
34    // チェックボックスの判定用配列
35    const matchCheckArray = [
36      ['td.All_kubn', kubn],
37      ['td.All_level', level],
38      ['td.All_kai', kai],
39    ]
40
41    $("#abcd tbody tr").each(function() {
42      // 全ての要素に対して入力とのマッチをチェック → name==''なら必ずtrue
43      // 初期値 : name == "" で、matchTextElementの要素の判定を||でつなげていく
44      const matchText = matchTextArray.reduce((acc, currentValue) =>
45        acc || textMatched(this, currentValue, name), name == "")
46
47      // 全ての要素に対してチェックボックスとのマッチをチェック
48      const matchCheck = matchCheckArray.reduce((acc, currentValue) =>
49        acc && checkBoxMatched(this, currentValue[0], currentValue[1]), true)
50
51      // わからなければこっちでも良し
52      /* const matchText = name == "" || textMatched(this, 'td.All_kubn') || textMatched(this, 'td.All_level') || textMatched(this, 'td.All_houi') || textMatched(this, 'td.All_kai') || textMatched(this, 'td.All_toho') || textMatched(this, 'td.All_yacin') || textMatched(this, 'td.All_sonota') */
53
54      /* const matchCheck = checkBoxMatched(this, 'td.All_kubn', kubn) || checkBoxMatched(this, 'td.All_level', level) || checkBoxMatched(this, 'td.All_kai', kai)*/
55
56      if (matchCheck && matchText) {
57        $(this).show();
58      } else {
59        $(this).hide();
60      }
61    });
62  });
63  $(":checkbox").prop("checked", false);
64});
65

その他

ifの条件が長すぎる

if ($.inArray($(this).find("td.All_kubn").text(),kubn) >= 0 && $.inArray( $(this).find("td.All_level").text(),level) >= 0 && $.inArray( $(this).find("td.All_kai").text(),kai) >= 0 && (name=="" || //文字入力がnull または　各 reg.test($(this).find("td.All_kubn").text()) || reg.test($(this).find("td.All_lever").text()) || reg.test($(this).find("td.All_houi").text()) || reg.test($(this).find("td.All_kai").text()) || reg.test($(this).find("td.All_toho").text()) || reg.test($(this).find("td.All_yacin").text()) || reg.test($(this).find("td.All_sonota").text()) ) )
これ自分で見て訳わからなく成りませんか？
多少冗長になっても条件は変数に分割したり関数にまとめたりしたほうが修正するときも楽です。