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

Question

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;
}



  White
  
  
    Red
  
  
    Orange
  



  
    
      Color
      Name
      HTML Color Code
      Shade Group
    
    
      
        
      
      White
      #FFFFFF
      White
    
    
      
        
      
      Champagne
      #F7E7CE
      White
    
    
      
        
      
      Red (Pantone)
      #ED2839
      Red
    
    
      
        
      
      Red (CMYK) (pigment red)
      #ED1B24
      Red
    
    
      
        
      
      UT orange
      #FF8200
      Orange
    
    
      
        
      
      Orange (wheel)
      #FF8000
      Orange

user_2943218 · Answer

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;
}



  White
  
  
    Red
  
  
    Orange
  



  
    
      Color
      Name
      HTML Color Code
      Shade Group
    
    
      
        
      
      White
      #FFFFFF
      White
    
    
      
        
      
      Champagne
      #F7E7CE
      White
    
    
      
        
      
      Red (Pantone)
      #ED2839
      Red
    
    
      
        
      
      Red (CMYK) (pigment red)
      #ED1B24
      Red
    
    
      
        
      
      UT orange
      #FF8200
      Orange
    
    
      
        
      
      Orange (wheel)
      #FF8000
      Orange

user_519413 · Answer

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;
}



  White
  
  
    Red
  
  
    Orange
  



  
    
      Color
      Name
      HTML Color Code
      Shade Group
    
    
      
        
      
      White
      #FFFFFF
      White
    
    
      
        
      
      Champagne
      #F7E7CE
      White
    
    
      
        
      
      Red (Pantone)
      #ED2839
      Red
    
    
      
        
      
      Red (CMYK) (pigment red)
      #ED1B24
      Red
    
    
      
        
      
      UT orange
      #FF8200
      Orange
    
    
      
        
      
      Orange (wheel)
      #FF8000
      Orange

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

2 Answers