纯javascript复选框筛选行

Question

我有以下代码。表格行中比较值的复选框

问题：
1(当表值为同一多行时，它将隐藏我想填写的所有内容1复选框1行
2？我想启动加载窗口的功能

Fiddle：http://jsfiddle.net/4sx1pdmn/

有人能用我的密码提供建议吗？

function filterCondtn1(event) {
var element = event.target
var condt1 = document.getElementsByClassName("option")
for (var i = 0; i < condt1.length; i++) {
if (condt1[i].innerHTML.toLowerCase() == element.value.toLowerCase()) {
if (element.checked == true) {
condt1[i].parentElement.style = "display:none"
} else {
condt1[i].parentElement.style = "display:block"
}
}
}
}

table  {
border-collapse : collapse;
margin          : 2em 1em;
}
td,th  {
padding    : .2em .8em;
border     : 1px solid darkblue;
}

<div id="InputOpts">
<input type="checkbox" value="1" oninput="filterCondtn1(event);">Option 1
<input type="checkbox" value="1" oninput="filterCondtn1(event);">Option 2
<input type="checkbox" value="2" oninput="filterCondtn1(event);">Option 3
</div>
<table id="myTable">
<tr>
<th>Name</th>
<th>Country</th>
</tr>
<tr>
<td class="option">1</td>
<td>1</td>
</tr>
<tr>
<td class="option">2</td>
<td>2</td>
</tr>
<tr>
<td class="option">3</td>
<td>3</td>
</tr>
<tr>
<td class="option">1</td>
<td>1</td>
</tr>
</table>

很抱歉我的英语不好，无法解释我需要什么，希望你能理解我需要什么

Answer 1

您应该使用Set跟踪您的选择。如果需要多个筛选器，可以使用Map。如果该选项处于启用状态，则添加到集合中；如果该选项被禁用，则删除。

使用类隐藏不符合筛选条件的行。

const filterVals = new Set();
const isValid = (value) => filterVals.size === 0 || filterVals.has(value);
const handleInputChange = ({ target: { checked, value } }) => {
if (checked) filterVals.add(value);
else filterVals.delete(value);
updateTableRows();
}
const updateTableRows = () =>
document.querySelectorAll('.option').forEach(option => {
option.closest('tr').classList.toggle('hidden-row', !isValid(option.textContent));
});
document.querySelectorAll('#input-opts input[type="checkbox"]')
.forEach(input => input.addEventListener('input', handleInputChange));

table { border-collapse: collapse; }
table, th, td { border: thin solid grey; }
th, td { padding 0.25em; text-align: center; }
.hidden-row { display: none; }
#input-opts { margin-bottom: 1em; }
#input-opts label { margin-right: 1em; }

<div id="input-opts">
<label>Name 1 <input type="checkbox" value="1" /></label>
<label>Name 2 <input type="checkbox" value="2" /></label>
<label>Name 3 <input type="checkbox" value="3" /></label>
</div>
<table id="my-table">
<thead>
<tr><th>Name</th><th>Country</th></tr>
</thead>
<tbody>
<tr><td class="option">1</td><td>1</td></tr>
<tr><td class="option">2</td><td>2</td></tr>
<tr><td class="option">3</td><td>3</td></tr>
<tr><td class="option">1</td><td>1</td></tr>
</tbody>
</table>

Answer 2

实现的方法

const TD_option =
[...document.querySelectorAll('#myTable td.option')]  // make an array
.map(el=>(                                         // of objects { val, el }
{ val : el.textContent.trim().toLowerCase()
, tr  : el.closest('tr')
})) 
;
document
.querySelectorAll('#InputOpts input[type="checkbox"]')
.forEach( ckbx =>
{
ckbx.checked = true  // all are  displayed on document load
let chkVal   = ckbx.value.toLowerCase()
ckbx.oninput = e =>
{
TD_option.forEach( row =>
{
if (chkVal == row.val )
row.tr.classList.toggle('noDisplay', !ckbx.checked )
})
}
})

table  {
border-collapse : collapse;
margin          : 2em 1em;
}
td,th  {
padding    : .2em .8em;
border     : 1px solid darkblue;
}
.noDisplay {
display: none;
}

<div id="InputOpts">
<label><input type="checkbox" value="1">Option 1</label>
<label><input type="checkbox" value="2">Option 2</label>
<label><input type="checkbox" value="3">Option 3</label>
</div>


<table id="myTable">
<tr>
<th>Name</th>
<th>Country</th>
</tr>
<tr>
<td class="option">1</td>
<td>1</td>
</tr>
<tr>
<td class="option">2</td>
<td>2</td>
</tr>
<tr>
<td class="option">3</td>
<td>3</td>
</tr>
<tr>
<td class="option">1</td>
<td>1</td>
</tr>
</table>