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