Javascript 复选框相互矛盾

我有一个“几乎”完成的项目。我在这里得到了很多帮助，我希望我能很快完成这个项目。我有一个带有复选框的表单，代表3个不同项目的不同属性。当用户选中一个特定的复选框时，无论哪个项与隐藏项不对应，我都会将该项以及与选中项不匹配的任何属性设置为禁用，并且文本颜色变为浅灰色。因此，唯一仍处于活动状态的框将是为所述项目组合在一起的框

我想我可以把这些都做好。但有几个属性对应于多个项目。如果你看我的例子（提供的链接）

如果勾选“经济”复选框，则仅显示一个灰色框“Bernini”，并且许多其他复选框被禁用，这是正确的。取消选中它，所有内容都将启用并再次可见

如果选中“底部导轨中的磁带”复选框，则会显示两个灰色框“Bernini&Picasso”，这也是正确的，因为“底部导轨中的磁带”属性同时适用于这两个框。取消选中它，所有内容都将启用并再次可见

我遇到的问题是，如果同时选中“经济型”和“底部导轨中的磁带”，然后取消选中其中任何一个，错误的属性将被启用，可见的灰色框不再正确对应

我想我应该使用一个'elseif'或另一个'if'语句，但如果是这样，我还没有弄清楚如何让它正确工作

这是我到目前为止使用的JS，它只用于其中一个函数

function bannerBernini() {
if (document.checkForm1.att_2.checked || document.checkForm1.att_5.checked || document.checkForm1.att_6.checked || document.checkForm2.att_9.checked || document.checkForm2.att_15.checked || document.checkForm3.att_23.checked)
{
    var berninis = document.querySelectorAll('.picasso, .matisse, .picasso-matisse');
    for (var i = 0; i < berninis.length; i++) {
    berninis[i].style.color="#d1d1d1";}
    var not_bernini = document.querySelectorAll('#att_3, #att_10, #att_11, #att_13, #att_14, #att_16, #att_17, #att_18, #att_19, #att_20, #att_21, #att_22, #att_24');
    for (var j = 0; j <  not_bernini.length; j++){
    not_bernini[j].disabled=true;}
    document.getElementById("Picasso").style.display="none";
    document.getElementById("Matisse").style.display="none";
}
else
{
    var berninis = document.querySelectorAll('.picasso, .matisse, .picasso-matisse');
    for(var i = 0; i < berninis.length; i++) {
     berninis[i].style.color="";}
    var not_bernini = document.querySelectorAll('#att_3, #att_10, #att_11, #att_13, #att_14, #att_16, #att_17, #att_18, #att_19, #att_20, #att_21, #att_22, #att_24');
    for (var j = 0; j <  not_bernini.length; j++){
    not_bernini[j].disabled=false;}
    document.getElementById("Picasso").style.display="";
    document.getElementById("Matisse").style.display="";
}}

函数bannerBernini（）{
如果（document.checkForm1.att|u 2.checked | document.checkForm1.att|u 5.checked | document.checkForm1.att|u 6.checked | document.checkForm2.att|u 9.checked | document.checkForm2.att| u 15.checked | document.checkForm3.att|u 23.checked）
{
var berninis=document.queryselectoral（'.picasso、.matisse、.picasso-matisse'）；
对于（变量i=0；i

以下是我希望有意义的示例：

---

提前感谢您的帮助。我知道有些人会说我应该使用jQuery，但这是我第一次尝试使用javascript编写代码，而且我对jQuery不熟悉，所以我更愿意尝试将其保留在我仍然理解代码的地方。

“我有一个复选框的列表…”嗯，什么？确保当复选框取消选中时，在再次启用复选框之前，首先检查哪些复选框仍被勾选。这是一个放置

数据-*

属性的好地方。将关系添加到属性，当取消选中复选框时，过滤受影响的复选框。因此，了解三元运算符是一个好主意。我刚刚把你的功能减半了谢谢大家的帮助@DylanMeeus这就是我认为我遗漏的东西，因为它不知道还有什么需要检查，但我不确定如何正确地做到这一点。我是否必须将另一个变量=设置为未选中的变量？