javascript - 使用 getElementsByClassName 更改多个类？

Question

我一直在努力寻找我认为应该很容易解决的问题的答案，但我必须仔细检查一些东西。我对 Javascript 很陌生，对 jQuery 不太熟悉。我也想完全用 javascript 来做这件事，因为这是我第一次真正尝试使用它。我有一个使用复选框的项目，我得到了一些帮助，但我正在尝试使用 document.getElementsByClassName 来更改多个类的样式。

我已使用 .querySelectorAll 选项将我的脚本更新为以下内容。我还添加了一个 else 来删除灰色文本颜色并启用复选框。

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');
    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;}
}
else
{
    var berninis = document.querySelectorAll('.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;}
}}

**现在我需要弄清楚如何让两个选项共享但不相互干扰的复选框。例如；

复选框“单一图形使用”仅适用于 Bernini，但复选框“Silver Finish”适用于 Bernini 和 Picasso。如何在选中“单一图形使用”时使它仍然启用，但如果选中“夹入式顶部导轨”则不启用？

如果需要，这里有一些 html

<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="bannerBernini();">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="bannerBernini();">Adjustable Twist Locking Pole</span><br />
        <span class="bernini"><input type="checkbox" id="att_6" name="att_6" onChange="bannerBernini();">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>

感谢您提供的任何帮助。

我已经更新了代码，这里是我所拥有的链接。我快要得到我需要的东西了(非常感谢大家)我现在唯一想不通的是；

复选框“Tape-in​​ Bottom Rail”需要显示适用于“bernini and picasso”类的所有复选框。现在，如果您单击该复选框，它就会起作用。但是，如果您还选择了仅适用于“bernini”或“picasso”的复选框，然后取消选中它，则不可用的选项将变为可用。有人对如何缓解这种情况有任何建议吗？

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

Answer 1

使用 document.querySelectorAll 代替 document.getElementsByClassName 并传入 CSS 选择器(不仅仅是类名):

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