0

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

我可以让这一切正常工作（我认为）。但是有一些属性对应多个项目。如果您查看我的示例（提供的链接）

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

如果您选中“Tape-in​​ Bottom Rail”复选框，则会显示 2 个灰色框“Bernini & Picasso”，这也是正确的，因为“Tape-in​​ Bottom Rail”属性适用于两者。取消选中它，一切都已启用并再次可见。

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

我虽然应该使用“else if”或另一个“if”语句，但如果是这样，我还没有弄清楚如何让它正常工作。

这是我目前使用的 JS，这仅适用于其中 1 个功能。

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="";
}}

这是我希望有意义的示例：

http://jsfiddle.net/g_borg/48uhn/1/

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

4

0 回答 0