Question

我有一个“差不多”完成的项目。我在这里得到了很多帮助，我希望我能很快完成这个项目。我有一个带有复选框的表单，表示3个不同项目的不同属性。当用户检查特定的复选框时，我有任何与hide不对应的项目，以及任何不与已检查的属性相关的属性都将被禁用，文本颜色变为浅灰色。所以唯一仍然活跃的盒子就是那些一起用于所述物品的盒子。

我可以让一切工作得很好（我想）。但是有一些属性对应于多个项目。如果你看一下我的例子（提供的链接）

如果你检查'经济'chekcbox只显示1个灰色框'Bernini'并且许多其他复选框被禁用，这是正确的。取消检查，一切都已启用并再次可见。

如果您选中'Tape-in Bottom Rail'复选框2灰色框'Bernini＆amp;显示Picasso'也是正确的，因为属性'Tape-in Bottom Rail'适用于两者。取消检查，一切都已启用并再次可见。

我遇到的问题是，如果你同时检查'经济'和'Tape-in Bottom Rail'然后取消选中其中任何一个，启用错误的属性并且可见的灰色框不再正确对应。

我虽然应该使用'else if'或其他'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="";
}}

以下是我希望有意义的样本：

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

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

复选框相互矛盾

0 个答案: