我试图使用复选框作为过滤器来隐藏行来隐藏特定的表行。我已经搜索了大量不同的复选框，css可见性，jquery等示例。但是，我没有找到任何适合我的场景的示例，而且我似乎无法根据示例将自定义解决方案合并到一起找到了。
- 勾选复选框应删除与复选框值不匹配的任何行。例如，如果我检查＆＃34;男性＆＃34;复选框，它应该隐藏那些没有＆＃34;性别＆＃34; ＆＃34;男性＆＃34;的价值
- 取消选中该复选框应该会再次显示相应的行
- 代码应该能够处理多个复选框。例如，如果我检查＆＃34; Droid＆＃34;复选框和我检查＆＃34;男＆＃34;复选框，不显示结果，因为没有结果存在MATCH BOTH条件。
更新：
我搞砸了最初的逻辑。
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: 8px; }
tr:nth-child(even){background-color: #f2f2f2}
th { background-color: #0099ff; color: white; }
table, th, td { border: 1px solid black; }
* { box-sizing: border-box; }
body { margin: 0; }
.column {
float: left;
padding: 10px;
height: 300px; /* Should be removed. Only for demonstration */
}
.left { width: 75%; }
.right { width: 25%; }
.row:after {
content: "";
display: table;
clear: both;
}<div class="column left">
<table>
<thead>
<th>Name</th>
<th>Occupation</th>
<th>Gender</th>
<th>Race</th>
</thead>
<tbody>
<tr gender="male" race="sith">
<td>Darth Vader</td>
<td>Dark Lord of the Sith</td>
<td>Male</td>
<td>Sith</td>
</tr>
<tr gender="male" race="human">
<td>Boba Fett</td>
<td>Bounty Hunter</td>
<td>Male</td>
<td>Human</td>
</tr>
<tr gender="male" race="unknown">
<td>Yoda</td>
<td>Jedi Master</td>
<td>Male</td>
<td>Unknown</td>
</tr>
<tr gender="non-binary" race="droid">
<td>R2D2</td>
<td>Astromech Droid</td>
<td>Non-Binary</td>
<td>Droid</td>
</tr>
</tbody>
</table>
</div>
<div class="column right">
<div><b>Filters</b></div>
<div><b>Gender</b></div>
<div><input type="checkbox" value="male">Male</input></div>
<div><input type="checkbox" value="non-binary">Non-Binary</input></div>
<div><b>Race</b></div>
<div><input type="checkbox" value="sith">Sith</input></div>
<div><input type="checkbox" value="human">Human</input></div>
<div><input type="checkbox" value="unknown">Unknown</input></div>
<div><input type="checkbox" value="droid">Droid</input></div>
</div>
答案 0 :(得分：1)
执行此类操作的最佳方法是使用单个“更新”函数来确定哪些行应该是可见的，哪些不应该是可见的，并应用这些样式（这与它的工作方式很接近）像ReactJS这样的东西）。这是一个如何做到这一点的例子。
我已经更改了您的复选框，因此很容易在代码中告诉哪些是针对种族的，哪些是针对性别的：
<div class="column right">
<div><b>Filters</b></div>
<div><b>Gender</b></div>
<div><input type="checkbox" class="gender" value="male">Male</input></div>
<div><input type="checkbox" class="gender" value="non-binary">Non-Binary</input></div>
<div><b>Race</b></div>
<div><input type="checkbox" class="race" value="sith">Sith</input></div>
<div><input type="checkbox" class="race" value="human">Human</input></div>
<div><input type="checkbox" class="race" value="unknown">Unknown</input></div>
<div><input type="checkbox" class="race" value="droid">Droid</input></div>
</div>
现在我们附加一个监听器，以便每当复选框发生变化时我们都会更新所有表行：
$("input").on("click", updateRows );
function updateRows() {
$("table tr").each( function() {
var $row = $(this);
updateRow( $row );
});
}
function updateRow( $row ) {
var gender = $row.attr("gender");
var race = $row.attr("race");
var visibility = isGenderVisible( gender ) && isRaceVisible( race );
$row.css("visibility", visibility ? "visible": "hidden");
}
function isGenderVisible( gender ) {
var gendersChecked = $("input.gender").map( function() {
if ( this.checked ) return this.value;
});
if ( gendersChecked.length === 0 ) return true;
if ( gendersChecked.length === 1 ) return gender === gendersChecked[0];
return false;
}
function isRaceVisible( race ) {
var racesChecked = $("input.race").map( function() {
if ( this.checked ) return this.value;
});
if ( racesChecked.length === 0 ) return true;
if ( racesChecked.length === 1 ) return race === racesChecked [0];
return false;
}
答案 1 :(得分：1)
Duncan Thacker的回答非常准确地描述了一般方法，但是由于我已经完成了我的工作示例，所以你去...... 我还认为我的方法更易于掌握，并且每个过滤器使用不同的函数时不那么臃肿，但它可能有点过于简单，需要进行扩展，具体取决于您可能具有的超出此简单代码的未来过滤机制示例
var tableRows = $('.column.left tbody tr'),
filterBoxes = $('.column.right :checkbox').on('change', filterTable);
function filterTable() {
var filter_selector = '';
$('.column.right :checked').each(function() {
filter_selector += '[' + $(this).attr('name') + '=' + '"' + $(this).val() + '"]';
});
if (filter_selector.length < 1) {
tableRows.show();
} else {
tableRows.hide().filter(filter_selector).show();
}
}table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: 8px; }
tr:nth-child(even){background-color: #f2f2f2}
th { background-color: #0099ff; color: white; }
table, th, td { border: 1px solid black; }
* { box-sizing: border-box; }
body { margin: 0; }
.column {
float: left;
padding: 10px;
height: 300px; /* Should be removed. Only for demonstration */
}
.left { width: 75%; }
.right { width: 25%; }
.row:after {
content: "";
display: table;
clear: both;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="column left">
<table>
<thead>
<th>Name</th>
<th>Occupation</th>
<th>Gender</th>
<th>Race</th>
</thead>
<tbody>
<tr gender="male" race="sith">
<td>Darth Vader</td>
<td>Dark Lord of the Sith</td>
<td>Male</td>
<td>Sith</td>
</tr>
<tr gender="male" race="human">
<td>Boba Fett</td>
<td>Bounty Hunter</td>
<td>Male</td>
<td>Human</td>
</tr>
<tr gender="male" race="unknown">
<td>Yoda</td>
<td>Jedi Master</td>
<td>Male</td>
<td>Unknown</td>
</tr>
<tr gender="non-binary" race="droid">
<td>R2D2</td>
<td>Astromech Droid</td>
<td>Non-Binary</td>
<td>Droid</td>
</tr>
</tbody>
</table>
</div>
<div class="column right">
<div><b>Filters</b></div>
<div><b>Gender</b></div>
<div><input type="checkbox" name="gender" value="male">Male</input></div>
<div><input type="checkbox" name="gender" value="non-binary">Non-Binary</input></div>
<div><b>Race</b></div>
<div><input type="checkbox" name="race" value="sith">Sith</input></div>
<div><input type="checkbox" name="race" value="human">Human</input></div>
<div><input type="checkbox" name="race" value="unknown">Unknown</input></div>
<div><input type="checkbox" name="race" value="droid">Droid</input></div>
</div>