vanilla js hide row table on checkbox

Question

I have the following codes. checkbox for hide table row

Problem : Filter boolean can't hide of table but hide select option ? I want to hide row

Fiddle: http://jsfiddle.net/ocy8hzux/

Can anyone advise with my codes?

 function filter(event, filterCol) { let element = event.target; let condt1 = document.getElementsByClassName(filterCol); for (let i = 0; i < condt1.length; i++) { if (condt1[i].innerHTML.toLowerCase() == element.value.toLowerCase()) { if (element.checked == true) { condt1[i].parentElement.style = "" } else { condt1[i].parentElement.style = "display:none" } } } } document.querySelectorAll('.option1') .forEach(input => input.addEventListener('input', ()=>filter(event,"check1"))); document.querySelectorAll('.option2') .forEach(input => input.addEventListener('input', ()=>filter(event,"check2")));

 <div id="input"> <label>Filter Name </label><br> <label>Human<input class="option1" type="checkbox" value="Human" checked/></label> <label>Robot<input class="option1" type="checkbox" value="Robot"checked/></label><br><br> <label>Filter boolean </label><br> <label>true<input class="option2" type="checkbox" value="true" checked/></label> <label>false<input class="option2" type="checkbox" value="false" checked/></label> </div><br> <table id="my-table"> <thead> <tr> <th> Name </th> <th> boolean </th> </tr> </thead> <tbody> <tr> <td class="check1">Robot</td> <td> <select> <option class="check2">true</option> <option >true</option> </select> </td> </tr> <tr> <td class="check1">Human</td> <td> <select> <option class="check2">true</option> <option >false</option> </select> </td> </tr> <tr> <td class="check1">Robot</td> <td> <select> <option class="check2">false</option> <option >false</option> </select> </td> </tr> <tr> <td class="check1">Human</td> <td> <select> <option class="check2">true</option> <option >true</option> </select> </td> </tr> </tbody> </table>

Sorry for my bad English, can't explain all what I need, hope you understand what I need

Thanks !

Answer 1

If I understand correctly you want to hide the rows and not the select boxes?

You could always just target the closes 'tr' which you are doing the style updates.

if (element.checked == true) {
   condt1[i].parentElement.closest('tr').style = ""
} else {
   condt1[i].parentElement.closest('tr').style = "display:none"
}

Fiddle here: http://jsfiddle.net/dxmga68s/2/