Javascript 复选框选择似乎不一致

好的，我得到了一个使用JavaScript的项目（仍在学习）。 基本上，我需要有一个复选框列表（即属性），用户可以选择，因为他们选择这些不同的属性，我需要有一个不同的divs显示，有相应的信息选择的属性。e、 g.如果他们选中“经济”复选框，则仅显示与该复选框关联的div。这就是我能去工作的地方

现在，我需要根据选中的属性，将不在一起的属性变灰并禁用。e、 g.“经济”复选框与“高级”复选框不匹配。因此，如果用户选中“经济”复选框，“高级”复选框应该被禁用并变灰。在某种程度上，我已经让它发挥作用了

但是，有些属性由不同的div共享。这就是我遇到麻烦的地方。这是我的HTML：我的“头”中确实有一个指向我的js文件的链接。 这只是本页的一部分：

    <div id="column2" style="width:250px; padding:5px 10px 5px 10px; float:left">
    <form name="checkForm2" id="checkForm2">
        <input type="checkbox" id="att_9" name="att_9" onChange="showBERNINI();"><span id="grey_att9">Economy</span><br />
        <input type="checkbox" id="att_10" name="att_10" onChange="showPICASSO();"><span id="grey_att10">Visible Banner: 33.5" x 78.7"</span><br />
        <input type="checkbox" id="att_11" name="att_11" onChange="showMATISSE();"><span id="grey_att11">Tension Knob System</span><br />
        <input type="checkbox" id="att_12" name="att_12" onChange="showBERNPIC();"><span id="grey_att12">Tape-in Bottom Rail</span><br />
        <input type="checkbox" id="att_13" name="att_13" onChange="showPICASSO();"><span id="grey_att13">3 piece bungee pole</span><br />
        <input type="checkbox" id="att_14" name="att_14" onChange="showMATISSE();"><span id="grey_att14">Great for interchangeable graphics</span><br />
        <input type="checkbox" id="att_15" name="att_15" onChange="showBERNINI();"><span id="grey_att15">90 day warranty</span><br />
        <input type="checkbox" id="att_16" name="att_16" onChange="showMATISSE();"><span id="grey_att16">Chrome end caps</span><br />
    </form>
</div>

我遇到的问题的最好例子是，当我选择“经济型”复选框，然后选择“底部导轨中的磁带”复选框时，如果我碰巧取消选择“底部导轨中的磁带”复选框，那么又有太多复选框可用，我无法让它仅显示选中“经济型”复选框时应该显示的内容。它就像一些不应该被启用的功能一样

我希望我没有在这里添加太多内容，但因为这是我的第一个JavaScript项目，我想我应该发布更多而不是更少。我也知道必须有一种更为整合的方式来完成我正在尝试的工作，但我对使用jQuery不是很满意。任何帮助都将不胜感激，因为我已经关注这一点很长一段时间了

我尝试使用getElementByClassName并取得了一些成功，但还没有完全成功。我有这个html

<p><input type="button" value="nightmare" onClick="nightmare();"></p>
<div id="form" style="width:810px; font-family:Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:12px;">
<div id="column1" style="width:250px; padding:5px 10px 5px 10px; float:left">
    <form name="checkForm1" id="checkForm1">
        <span class="all"><input type="checkbox" id="att_1" name="att_1" class="all" onChange="">Single-sided</span><br />
        <span class="bernini"><input type="checkbox" id="att_2" name="att_2" onChange="">Visible Banner: 33.5" x 36"-78.7"</span><br />
        <span class="picasso"><input type="checkbox" id="att_3" name="att_3" onChange="">Medium Duty Spring System</span><br />
        <span class="matisse"><input type="checkbox" id="att_4" name="att_4" onChange="">Clip-in Top Rail</span><br />
        <span class="bernini"><input type="checkbox" id="att_5" name="att_5" onChange="">Adjustable Twist Locking Pole</span><br />
        <span class="bernini"><input type="checkbox" id="att_6" name="att_6" onChange="">Single graphic use</span><br />
        <span class="all"><input type="checkbox" id="att_7" name="att_7" onChange="">Carrying case included</span><br />
        <span class="all"><input type="checkbox" id="att_8" name="att_8" onChange="">Silver finish</span><br />
    </form>
</div></div>

单面

可见横幅：33.5英寸x 36“-78.7英寸

中等负荷弹簧系统

卡入顶部导轨

可调扭锁杆

单一图形使用

包括手提箱

银色饰面

这是js

function nightmare(){var berninis = document.getElementsByClassName('picasso matisse');for(var i = 0; i < berninis.length; i++) {berninis[i].style.color="#d1d1d1";}}

function monda梦魇（）{var berniniis=document.getElementsByClassName（'picasso matisse'）；for（var i=0；i

---

现在，如果函数中只有一个类，它可以工作，但一旦我同时使用这两个类，它就不再工作了。

如果您了解angular，您可以使用它来简化您的工作。要使用它，您可以使用许多信息来帮助您完成这项工作，而且非常容易学习。在这个框架中，您可以创建函数并例如，只需在代码的开头定义它们。在.js文件中，您只需执行所需的操作，就可以阻止所有的工作和代码。这是处理此类工作的一个非常好的建议。

使用jquery进行此操作您的检查太简单了。您不能只选中已更改的复选框，而是选中所有适用的复选框对于给定的属性。也就是说，每当应用于该属性的任何复选框发生更改时，您始终需要选中应用于该属性的每个复选框。仅选中一个已更改的复选框将以您所看到的方式失败。所有这些

getElementById

都可以替换为

getElementsByCassName

和一个simplee循环。我以为我在检查它，除非我遗漏了它。（document.checkForm…line check）是否检查与该复选框相关的所有属性，该复选框上有该函数？通过getElementsByClass，我可以让其中一个类更改样式，但不能超过一个。getElementsByClassName（'picasso matisse'）似乎不起作用，但（'picasso'）有。我还尝试将.disabled=true附加到类，但这也不起作用。我正在进行的搜索似乎应该能够在getElementsByClassName（'class1 class2'）中包含多个类。

function nightmare(){var berninis = document.getElementsByClassName('picasso matisse');for(var i = 0; i < berninis.length; i++) {berninis[i].style.color="#d1d1d1";}}