選中多個復選框以過濾與每個輸入標簽文本匹配的表行-有解無憂

在下面的代碼段中，一次選中一個復選框可以正常作業，但選中多個復選框不能按預期作業。我猜當我檢查多個復選框時，例如Whiteand Orange，該函式正在WhiteOrange列單元格中查找，顯然不會導致任何結果。如何一一檢查每個標簽文本以獲取所有匹配結果？

另外，如何在更改功能之前檢查復選框的初始狀態，以便White在加載頁面時只顯示結果？我嘗試在更改函式之前在 for 回圈中運行過濾器函式，但它根本不起作用。

謝謝您的幫助; 非常感謝！

$(function() {
  const focusInputs = document.querySelectorAll("input.focusbox");
  const focusColumns4 = document.querySelectorAll("table#colors tbody tr td.table-cell:nth-child(4)");
  for (const focusInput of focusInputs) {
    $(focusInput).on('change', function() {
      if (!$(focusInput).is(":checked")) {
        $(focusColumns4).parent('tr').show();
      } else if ($(focusInput).is(":checked")) {
        $(focusColumns4).filter(function() {
          return $(this).text() !== $(focusInput).parent().text();
        }).parent('tr').hide();
      }
    });
  }
});

body {
  font-size: 10px;
}

ul,
li {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

table#colors {
  margin-top: 5px;
}

table#colors tbody tr td.entry2 {
  width: 200px;
}

.cf-circle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid #C8C8C8;
  -webkit-transition: border-radius 1s, width 1s, height 1s;
  transition: border-radius 1s, width 1s, height 1s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<ul>
  <li><label class="focusbox-label"><input class="focusbox" type="checkbox" checked />White</label>
  </li>
  <li>
    <label class="focusbox-label"><input class="focusbox" type="checkbox" />Red</label>
  </li>
  <li>
    <label class="focusbox-label"><input class="focusbox" type="checkbox" />Orange</label>
  </li>
</ul>

<table id="colors">
  <tbody>
    <tr class="head-row">
      <th class="table-cell cYellow c1 entry1">Color</th>
      <th class="table-cell cYellow c1 entry2">Name</th>
      <th class="table-cell cYellow c1 entry3">HTML Color Code</th>
      <th class="table-cell cYellow c1 entry4">Shade Group</th>
    </tr>
    <tr class="s1">
      <td class="table-cell entry1">
        <div class="color-field cf-default cf-circle" style="background-color: #FFFFFF;"></div>
      </td>
      <td class="table-cell entry2">White</td>
      <td class="table-cell entry3">#FFFFFF</td>
      <td class="table-cell entry4">White</td>
    </tr>
    <tr class="s1">
      <td class="table-cell entry1">
        <div class="color-field cf-default cf-circle" style="background-color: #F7E7CE;"></div>
      </td>
      <td class="table-cell entry2">Champagne</td>
      <td class="table-cell entry3">#F7E7CE</td>
      <td class="table-cell entry4">White</td>
    </tr>
    <tr class="s1">
      <td class="table-cell entry1">
        <div class="color-field cf-default cf-circle" style="background-color: #ED2839;"></div>
      </td>
      <td class="table-cell entry2">Red (Pantone)</td>
      <td class="table-cell entry3">#ED2839</td>
      <td class="table-cell entry4">Red</td>
    </tr>
    <tr class="s1">
      <td class="table-cell entry1">
        <div class="color-field cf-default cf-circle" style="background-color: #ED1B24;"></div>
      </td>
      <td class="table-cell entry2">Red (CMYK) (pigment red)</td>
      <td class="table-cell entry3">#ED1B24</td>
      <td class="table-cell entry4">Red</td>
    </tr>
    <tr class="s1">
      <td class="table-cell entry1">
        <div class="color-field cf-default cf-circle" style="background-color: #FF8200;"></div>
      </td>
      <td class="table-cell entry2">UT orange</td>
      <td class="table-cell entry3">#FF8200</td>
      <td class="table-cell entry4">Orange</td>
    </tr>
    <tr class="s1">
      <td class="table-cell entry1">
        <div class="color-field cf-default cf-circle" style="background-color: #FF8000;"></div>
      </td>
      <td class="table-cell entry2">Orange (wheel)</td>
      <td class="table-cell entry3">#FF8000</td>
      <td class="table-cell entry4">Orange</td>
    </tr>
  </tbody>
</table>

uj5u.com熱心網友回復：

您的代碼是 jQuery 和本機 JS 的一個相當奇怪的組合。的使用focusColumns4還假設它與復選框的顏色相關，而實際上它包含所有行，無論在 DOM 中的位置如何，或者與觸發change事件的復選框的關系如何。

value通過將復選框設定為要在 DOM 中查找的顏色值，可以更簡單地實作您想要做的事情。然后，您可以構建一個已檢查值的陣列，并tr根據需要使用它來隱藏/顯示。

$(function() {
  let $focusInput = $('input.focusbox');
  let $focusRows = $('table#colors tbody tr');
  
  let setRowStates = () => {
    $focusRows.hide();
    let values = $focusInput.filter(':checked').map((i, el) => el.value).get();   
    values.forEach(colour => $focusRows.filter(`:has(.entry4:contains('${colour}'))`).show());
  };
  
  $focusInput.on('change', setRowStates).trigger('change'); 
});

body {
  font-size: 10px;
}

ul,
li {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

table#colors {
  margin-top: 5px;
}

table#colors tbody tr td.entry2 {
  width: 200px;
}

.cf-circle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid #C8C8C8;
  -webkit-transition: border-radius 1s, width 1s, height 1s;
  transition: border-radius 1s, width 1s, height 1s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<ul>
  <li><label class="focusbox-label"><input class="focusbox" type="checkbox" value="White" checked />White</label>
  </li>
  <li>
    <label class="focusbox-label"><input class="focusbox" type="checkbox" value="Red" />Red</label>
  </li>
  <li>
    <label class="focusbox-label"><input class="focusbox" type="checkbox" value="Orange" />Orange</label>
  </li>
</ul>

<table id="colors">
  <tbody>
    <tr class="head-row">
      <th class="table-cell cYellow c1 entry1">Color</th>
      <th class="table-cell cYellow c1 entry2">Name</th>
      <th class="table-cell cYellow c1 entry3">HTML Color Code</th>
      <th class="table-cell cYellow c1 entry4">Shade Group</th>
    </tr>
    <tr class="s1">
      <td class="table-cell entry1">
        <div class="color-field cf-default cf-circle" style="background-color: #FFFFFF;"></div>
      </td>
      <td class="table-cell entry2">White</td>
      <td class="table-cell entry3">#FFFFFF</td>
      <td class="table-cell entry4">White</td>
    </tr>
    <tr class="s1">
      <td class="table-cell entry1">
        <div class="color-field cf-default cf-circle" style="background-color: #F7E7CE;"></div>
      </td>
      <td class="table-cell entry2">Champagne</td>
      <td class="table-cell entry3">#F7E7CE</td>
      <td class="table-cell entry4">White</td>
    </tr>
    <tr class="s1">
      <td class="table-cell entry1">
        <div class="color-field cf-default cf-circle" style="background-color: #ED2839;"></div>
      </td>
      <td class="table-cell entry2">Red (Pantone)</td>
      <td class="table-cell entry3">#ED2839</td>
      <td class="table-cell entry4">Red</td>
    </tr>
    <tr class="s1">
      <td class="table-cell entry1">
        <div class="color-field cf-default cf-circle" style="background-color: #ED1B24;"></div>
      </td>
      <td class="table-cell entry2">Red (CMYK) (pigment red)</td>
      <td class="table-cell entry3">#ED1B24</td>
      <td class="table-cell entry4">Red</td>
    </tr>
    <tr class="s1">
      <td class="table-cell entry1">
        <div class="color-field cf-default cf-circle" style="background-color: #FF8200;"></div>
      </td>
      <td class="table-cell entry2">UT orange</td>
      <td class="table-cell entry3">#FF8200</td>
      <td class="table-cell entry4">Orange</td>
    </tr>
    <tr class="s1">
      <td class="table-cell entry1">
        <div class="color-field cf-default cf-circle" style="background-color: #FF8000;"></div>
      </td>
      <td class="table-cell entry2">Orange (wheel)</td>
      <td class="table-cell entry3">#FF8000</td>
      <td class="table-cell entry4">Orange</td>
    </tr>
  </tbody>
</table>

uj5u.com熱心網友回復：

請注意為什么要在和之間混合jQuery，javascript但請嘗試以下方式：

$(function() {
  const focusInputs = $("input.focusbox");

  focusInputs.change(function() {
    var checked = focusInputs.filter(function() {
      return $(this).is(":checked")
    })
    var colors = checked.map(function() {
      return $(this).parent().text()
    }).get()

    if (colors.length == 0) {
      $('#colors tr').show();
    } else {
      $('#colors tr').hide();
      $('#colors tr').filter(function() {
        return $.inArray($(this).find(".entry4").text(), colors) > -1
      }).show();
    }

  });
});

演示

顯示代碼片段

$(function() {
  const focusInputs = $("input.focusbox");

  focusInputs.change(function() {
    var checked = focusInputs.filter(function() {
      return $(this).is(":checked")
    })
    var colors = checked.map(function() {
      return $(this).parent().text()
    }).get()

    if (colors.length == 0) {
      $('#colors tr').show();
    } else {
      $('#colors tr').hide();
      $('#colors tr').filter(function() {
        return $.inArray($(this).find(".entry4").text(), colors) > -1
      }).show();
    }

  });
});

body {
  font-size: 10px;
}

ul,
li {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

table#colors {
  margin-top: 5px;
}

table#colors tbody tr td.entry2 {
  width: 200px;
}

.cf-circle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid #C8C8C8;
  -webkit-transition: border-radius 1s, width 1s, height 1s;
  transition: border-radius 1s, width 1s, height 1s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<ul>
  <li><label class="focusbox-label"><input class="focusbox" type="checkbox" checked />White</label>
  </li>
  <li>
    <label class="focusbox-label"><input class="focusbox" type="checkbox" />Red</label>
  </li>
  <li>
    <label class="focusbox-label"><input class="focusbox" type="checkbox" />Orange</label>
  </li>
</ul>

<table id="colors">
  <tbody>
    <tr class="head-row">
      <th class="table-cell cYellow c1 entry1">Color</th>
      <th class="table-cell cYellow c1 entry2">Name</th>
      <th class="table-cell cYellow c1 entry3">HTML Color Code</th>
      <th class="table-cell cYellow c1 entry4">Shade Group</th>
    </tr>
    <tr class="s1">
      <td class="table-cell entry1">
        <div class="color-field cf-default cf-circle" style="background-color: #FFFFFF;"></div>
      </td>
      <td class="table-cell entry2">White</td>
      <td class="table-cell entry3">#FFFFFF</td>
      <td class="table-cell entry4">White</td>
    </tr>
    <tr class="s1">
      <td class="table-cell entry1">
        <div class="color-field cf-default cf-circle" style="background-color: #F7E7CE;"></div>
      </td>
      <td class="table-cell entry2">Champagne</td>
      <td class="table-cell entry3">#F7E7CE</td>
      <td class="table-cell entry4">White</td>
    </tr>
    <tr class="s1">
      <td class="table-cell entry1">
        <div class="color-field cf-default cf-circle" style="background-color: #ED2839;"></div>
      </td>
      <td class="table-cell entry2">Red (Pantone)</td>
      <td class="table-cell entry3">#ED2839</td>
      <td class="table-cell entry4">Red</td>
    </tr>
    <tr class="s1">
      <td class="table-cell entry1">
        <div class="color-field cf-default cf-circle" style="background-color: #ED1B24;"></div>
      </td>
      <td class="table-cell entry2">Red (CMYK) (pigment red)</td>
      <td class="table-cell entry3">#ED1B24</td>
      <td class="table-cell entry4">Red</td>
    </tr>
    <tr class="s1">
      <td class="table-cell entry1">
        <div class="color-field cf-default cf-circle" style="background-color: #FF8200;"></div>
      </td>
      <td class="table-cell entry2">UT orange</td>
      <td class="table-cell entry3">#FF8200</td>
      <td class="table-cell entry4">Orange</td>
    </tr>
    <tr class="s1">
      <td class="table-cell entry1">
        <div class="color-field cf-default cf-circle" style="background-color: #FF8000;"></div>
      </td>
      <td class="table-cell entry2">Orange (wheel)</td>
      <td class="table-cell entry3">#FF8000</td>
      <td class="table-cell entry4">Orange</td>
    </tr>
  </tbody>
</table>

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/446101.html

標籤：jQuery 复选框筛选

上一篇：用逗號作為千位分隔符的串列上的Javascript數字排序

下一篇：如何在引導程式4中設計和定位移動選單