Javascript 使用jquery保持上一次高亮显示

我创建了一个简单的表来显示我遇到的问题。使用复选框高亮显示某个值时，如果该值存在于第二个复选框中，则该值仍将高亮显示。没关系。但是当我松开第一个或第二个复选框时，高亮显示消失了，尽管它仍然在第一个复选框中，并且仍然单击。 当第二个复选框未选中时，是否有办法保持高亮显示？ 我希望我说清楚了。如果您愿意，这里是我的JSFIDLE：

多谢各位

Html:

$（文档）.ready（函数（）{
$（'.selector'）。每个（函数（）{
$（此）.on（'click'，函数（e）{
check（$（this.prop（“checked”）？$（“#nextColor”）.val（）：'#fff'，$（this.attr（“name”）；
});
});
$（'.all'）。每个（函数（）{
$（此）。在（'click'，all）上；
});
功能全部（事件）{
如果（$（this）.is（':checked'））{
let checked=$（“输入：复选框：不（：选中）”，$（this.parents（'form'））。not（this）；
选中。道具（“选中”，为真）；
check（$（“#nextColor”）.val（），…checked.map（（i，e）=>e.name.get（））；
}否则{
let checked=$（“输入：复选框（：checked）”，$（此项）。父项（'form'）。非（此项）；
选中。道具（“选中”，假）；
check（'#fff'，…checked.map（（i，e）=>e.name.get（））；
}
}
功能检查（颜色，…元素）{
$（'td'）。每个（（i，td）=>{
if（elements.includes（$（td）.text（））$（td.css（'background'，color））；
});
}
});
table.tb{
边框：1px实心#CCC；
字体系列：Arial、Helvetica、无衬线字体；
字体大小：12px；
边界塌陷：塌陷；
表布局：固定；
左边距：200px；
}
.tb td{
填充物：5px；
保证金：5px；
边框：1px实心#ccc；
}

全选
x
Y
全选
x
Z
x
Y
Z
x
Q
A.
您的问题是，取消选中针对同一字母表的复选框似乎忽略了其他字母表的状态，这一问题来自以下有问题的行：

check($(this).prop("checked") ? $("#nextColor").val() : '#fff', $(this).attr("name"));

在这一行中，您只需检查正在单击的特定复选框是否被选中，而实际上您应该检查所有具有相同
名称
属性的复选框，并查看它们是否被选中

因此，您可以做的是简单地循环所有
选择器
，并通过（1）与当前复选框匹配的
名称
属性值和（2）如果选中它们，对它们进行过滤。如果选中其中任何一个，则传递到
check（）
的第一个参数应为
true
：

const $sameNameSelector = $('.selector[name="'+$(this).attr('name')+'"]');
const isAnySameNameSelectorChecked = $sameNameSelector.filter(function() { return this.checked }).length;
check(isAnySameNameSelectorChecked ? $("#nextColor").val() : '#fff', $(this).attr("name"));

更新：这似乎无法解决您的问题，因为
all（）
也在调用一些复杂的逻辑。您只需：

检查
单击
上的
事件侦听器。选择器
至
。更改

只需使用
.all
复选框即可触发对
.selector
复选框的更改，并手动触发
更改
事件。这会触发所有单个复选框上的单个逻辑，而无需复制任何逻辑：
函数所有（事件）{
$（this.nexist（'form'）.find（'.selector'）.prop（'checked'，this.checked.）.trigger（'change'）；
}

专业提示：您不需要执行
$（'.selector'）。每个（{$（this）.on（'…'）；}）
，然后绑定事件处理程序。jQuery可以智能地处理这个问题，所以您只需在（…）；”上执行“$（'.selector'）


$（文档）.ready（函数（）{
$（'.selector'）。on（'change'，函数（e）{
const$sameNameSelector=$（'.selector[name=“'+$（this.attr（'name'）+'“]）；
const isAnysamenameSelector checked=$sameNameSelector.filter（函数（）{
把这个还给我。检查过了吗
}).长度；
检查（IsAnysamenameSelector检查？$（“#下一个颜色”）.val（）：“#fff'，$（this.attr（“名称”））；
});
$（'.all'）。每个（函数（）{
$（此）。在（'click'，all）上；
});
功能全部（事件）{
$（this.nexist（'form'）.find（'.selector'）.prop（'checked'，this.checked.）.trigger（'change'）；
}
功能检查（颜色，…元素）{
$（'td'）。每个（（i，td）=>{
if（elements.includes（$（td）.text（））$（td.css（'background'，color））；
});
}
});
table.tb{
边框：1px实心#CCC；
字体系列：Arial、Helvetica、无衬线字体；
字体大小：12px；
边界塌陷：塌陷；
表布局：固定；
左边距：200px；
}
.tb td{
填充物：5px；
保证金：5px；
边框：1px实心#ccc；
}

全选
x
Y
全选
x
Z
x
Y
Z
x
Q
A.
您的问题是，取消选中针对同一字母表的复选框似乎忽略了其他字母表的状态，这一问题来自以下有问题的行：

check($(this).prop("checked") ? $("#nextColor").val() : '#fff', $(this).attr("name"));

在这一行中，您只需检查正在单击的特定复选框是否被选中，而实际上您应该检查所有具有相同
名称
属性的复选框，并查看它们是否被选中

因此，您可以做的是简单地循环所有
选择器
，并通过（1）与当前复选框匹配的
名称
属性值和（2）如果选中它们，对它们进行过滤。如果选中其中任何一个，则传递到
check（）
的第一个参数应为
true
：

const $sameNameSelector = $('.selector[name="'+$(this).attr('name')+'"]');
const isAnySameNameSelectorChecked = $sameNameSelector.filter(function() { return this.checked }).length;
check(isAnySameNameSelectorChecked ? $("#nextColor").val() : '#fff', $(this).attr("name"));

更新：这似乎无法解决您的问题，因为
all（）
也在调用一些复杂的逻辑。您只需：

检查
单击
上的
事件侦听器。选择器
至
。更改

只需使用
.all
复选框即可触发对
.selector
复选框的更改，并手动触发
更改
事件。这会触发所有单个复选框上的单个逻辑，而无需复制任何逻辑：
函数所有（事件）{
$（this.nexist（'form'）.find（'.selector'）.prop（'checked'，this.checked.）.trigger（'change'）；
}

专业提示：您不需要执行
$（'.selector'）。