0
在此示例https://jsfiddle.net/erv79u0w/中，单击“全选”时，所有相应的值在表格中高亮显示。使用jquery有条件地进行高亮显示
是否有可能以突出ONLY值表上的同一行现有在一起。例如，当选择“全部选择”时，第一个值（A，B，X，Y）只会突出显示在同一行中的值。在这种情况下，它只是表格中的第二行。所以只有第二行的值应该突出显示。
在同一行中的单元格而不是不应突出显示，如下图所示。
$('.selector').each(function() {
$(this).on('click', check);
});
$('.all').each(function() {
$(this).on('click', all);
});
function all(event) {
if ($(this).is(':checked')) {
$("input:checkbox:not(:checked)", $(this).parents('form')).not(this).prop("checked", "checked");
} else {
$("input:checkbox(:checked)", $(this).parents('form')).not(this).prop("checked", "");
}
//$('.selector').prop("checked", this.name === "SelectAll");
check(event);
}
function check(event) {
var checked = $(".selector:checked").map(function() {
return this.name
}).get()
$('td').removeClass("highlight").filter(function() {
return $.inArray($(this).text(), checked) >= 0
}).addClass("highlight")
if ($(this).is(".selector"))
$('.all').not(this).prop("checked", false)
}.highlight {
background: #9ac99d;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="container">
<div id="sidebar1">
<div id="container">
<div id="sidebar1">
<h3>Parameters:</h3>
<form id="form1" name="form1" method="post" action="">
<label>
<input type="checkbox" name="SelectAll" class="all" />Select All</label>
<label>
<input type="checkbox" name="A" class="selector" />A</label>
<label>
<input type="checkbox" name="B" class="selector" />B</label>
<label>
<input type="checkbox" name="X" class="selector" />X</label>
<label>
<input type="checkbox" name="Y" class="selector" />Y</label>
</form>
<form id="form2" name="form2" method="post" action="">
<label>
<input type="checkbox" name="SelectAll" class="all" />Select All</label>
<label>
<input type="checkbox" name="K" class="selector" />K</label>
<label>
<input type="checkbox" name="J" class="selector" />J</label>
<label>
<input type="checkbox" name="M" class="selector" />M</label>
<label>
<input type="checkbox" name="T" class="selector" />T</label>
</form>
</div>
<div id="mainContent">
<h3 align="right"> </h3>
<div>
<table width="200" border="1">
<tr>
<td>A</td>
<td> </td>
<td>M</td>
<td> </td>
<td>K</td>
<td>J</td>
</tr>
<tr>
<td> </td>
<td>B</td>
<td>A</td>
<td> </td>
<td>Y</td>
<td>X</td>
</tr>
<tr>
<td> </td>
<td>Y</td>
<td> </td>
<td>J</td>
<td>T</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> X</td>
<td> </td>
<td>X</td>
<td> </td>
<td>Y</td>
</tr>
<tr>
<td>K</td>
<td>Q</td>
<td> </td>
<td>T</td>
<td> </td>
<td>Y</td>
</tr>
<tr>
<td>M</td>
<td> </td>
<td>T</td>
<td>K</td>
<td>J</td>
<td>Z</td>
</tr>
</table>
</div>
</div>
你可以添加什么是当前渲染的图像和什么是所需的？它不是很明确 – vsync
@安德烈亚斯 - 问题被编辑，并且这是固定的 – vsync
请清楚你想达到什么目的。这个问题**非常**不清楚，并在关闭的边界.. – vsync