Check multiple Checkboxes to filter table rows matching each input label text-CodePudding

In the snippet below, having one checkbox checked at a time works fine but checking multiple checkboxes doesn't work as desired. I'm guessing that when I check multiple checkboxes, for example White and Orange, the function is looking for WhiteOrange in the column cells, obviously leading to no results. How do I check for each label text one by one to get all matching results?

Also, how can I check for the initial state of the checkboxes before the change function so that only the results for White are shown when loading the page? I've tried running the filter function within the for loop before the change function, but it didn't work at all.

Thank you for your help; it is greatly appreciated!

$(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 ><input  type="checkbox" checked />White</label>
  </li>
  <li>
    <label ><input  type="checkbox" />Red</label>
  </li>
  <li>
    <label ><input  type="checkbox" />Orange</label>
  </li>
</ul>

<table id="colors">
  <tbody>
    <tr >
      <th >Color</th>
      <th >Name</th>
      <th >HTML Color Code</th>
      <th >Shade Group</th>
    </tr>
    <tr >
      <td >
        <div  style="background-color: #FFFFFF;"></div>
      </td>
      <td >White</td>
      <td >#FFFFFF</td>
      <td >White</td>
    </tr>
    <tr >
      <td >
        <div  style="background-color: #F7E7CE;"></div>
      </td>
      <td >Champagne</td>
      <td >#F7E7CE</td>
      <td >White</td>
    </tr>
    <tr >
      <td >
        <div  style="background-color: #ED2839;"></div>
      </td>
      <td >Red (Pantone)</td>
      <td >#ED2839</td>
      <td >Red</td>
    </tr>
    <tr >
      <td >
        <div  style="background-color: #ED1B24;"></div>
      </td>
      <td >Red (CMYK) (pigment red)</td>
      <td >#ED1B24</td>
      <td >Red</td>
    </tr>
    <tr >
      <td >
        <div  style="background-color: #FF8200;"></div>
      </td>
      <td >UT orange</td>
      <td >#FF8200</td>
      <td >Orange</td>
    </tr>
    <tr >
      <td >
        <div  style="background-color: #FF8000;"></div>
      </td>
      <td >Orange (wheel)</td>
      <td >#FF8000</td>
      <td >Orange</td>
    </tr>
  </tbody>
</table>

CodePudding user response：

Your code is a rather odd mix of jQuery and native JS. The use of focusColumns4 also assumes that it is relevant to the colour of the checked box, when in fact it contains all the rows regardless of position in the DOM, or relation to the checkbox which triggered the change event.

What you're attempting to do can be achieved much more simply by setting the value of the checkboxes as the colour value to find within the DOM. Then you can build an array of the checked values and use that to hide/show the tr as necessary.

$(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 ><input  type="checkbox" value="White" checked />White</label>
  </li>
  <li>
    <label ><input  type="checkbox" value="Red" />Red</label>
  </li>
  <li>
    <label ><input  type="checkbox" value="Orange" />Orange</label>
  </li>
</ul>

<table id="colors">
  <tbody>
    <tr >
      <th >Color</th>
      <th >Name</th>
      <th >HTML Color Code</th>
      <th >Shade Group</th>
    </tr>
    <tr >
      <td >
        <div  style="background-color: #FFFFFF;"></div>
      </td>
      <td >White</td>
      <td >#FFFFFF</td>
      <td >White</td>
    </tr>
    <tr >
      <td >
        <div  style="background-color: #F7E7CE;"></div>
      </td>
      <td >Champagne</td>
      <td >#F7E7CE</td>
      <td >White</td>
    </tr>
    <tr >
      <td >
        <div  style="background-color: #ED2839;"></div>
      </td>
      <td >Red (Pantone)</td>
      <td >#ED2839</td>
      <td >Red</td>
    </tr>
    <tr >
      <td >
        <div  style="background-color: #ED1B24;"></div>
      </td>
      <td >Red (CMYK) (pigment red)</td>
      <td >#ED1B24</td>
      <td >Red</td>
    </tr>
    <tr >
      <td >
        <div  style="background-color: #FF8200;"></div>
      </td>
      <td >UT orange</td>
      <td >#FF8200</td>
      <td >Orange</td>
    </tr>
    <tr >
      <td >
        <div  style="background-color: #FF8000;"></div>
      </td>
      <td >Orange (wheel)</td>
      <td >#FF8000</td>
      <td >Orange</td>
    </tr>
  </tbody>
</table>

CodePudding user response：

Note sure why the mix between jQuery and javascript, but try this way:

$(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();
    }

  });
});

Demo

$(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 ><input  type="checkbox" checked />White</label>
  </li>
  <li>
    <label ><input  type="checkbox" />Red</label>
  </li>
  <li>
    <label ><input  type="checkbox" />Orange</label>
  </li>
</ul>

<table id="colors">
  <tbody>
    <tr >
      <th >Color</th>
      <th >Name</th>
      <th >HTML Color Code</th>
      <th >Shade Group</th>
    </tr>
    <tr >
      <td >
        <div  style="background-color: #FFFFFF;"></div>
      </td>
      <td >White</td>
      <td >#FFFFFF</td>
      <td >White</td>
    </tr>
    <tr >
      <td >
        <div  style="background-color: #F7E7CE;"></div>
      </td>
      <td >Champagne</td>
      <td >#F7E7CE</td>
      <td >White</td>
    </tr>
    <tr >
      <td >
        <div  style="background-color: #ED2839;"></div>
      </td>
      <td >Red (Pantone)</td>
      <td >#ED2839</td>
      <td >Red</td>
    </tr>
    <tr >
      <td >
        <div  style="background-color: #ED1B24;"></div>
      </td>
      <td >Red (CMYK) (pigment red)</td>
      <td >#ED1B24</td>
      <td >Red</td>
    </tr>
    <tr >
      <td >
        <div  style="background-color: #FF8200;"></div>
      </td>
      <td >UT orange</td>
      <td >#FF8200</td>
      <td >Orange</td>
    </tr>
    <tr >
      <td >
        <div  style="background-color: #FF8000;"></div>
      </td>
      <td >Orange (wheel)</td>
      <td >#FF8000</td>
      <td >Orange</td>
    </tr>
  </tbody>
</table>