javascript - 复选框选择似乎彼此不同意

Question

好的，我得到了一个使用 JavaScript 的项目（仍在学习）。基本上我需要有一个用户可以选择的复选框（即属性）列表，当他们选择这些不同的属性时，我需要有一个不同的 div 显示，这些 div 具有与所选属性对应的信息。例如，如果他们选择“经济”复选框，则仅显示与该复选框关联的 div。我已经能够开始工作了。

现在我需要让那些不一起变灰并被禁用的属性依赖于选中的属性。例如，“经济”复选框不与“高级”复选框一起使用。因此，如果用户选中“经济”复选框，则“高级”复选框应该被禁用并显示为灰色。在某种程度上，我已经得到了它的工作。

但是，某些属性由不同的 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>

JS文件：

function showBERNINI() {
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)
{
    document.getElementById("Picasso").style.display="none";
    document.getElementById("Matisse").style.display="none";
    document.getElementById("att_3").disabled=true;
    document.getElementById("att_10").disabled=true;
    document.getElementById("att_11").disabled=true;
    document.getElementById("att_13").disabled=true;
    document.getElementById("att_14").disabled=true;
    document.getElementById("att_16").disabled=true;
    document.getElementById("att_17").disabled=true;
    document.getElementById("att_18").disabled=true;
    document.getElementById("att_19").disabled=true;
    document.getElementById("att_20").disabled=true;
    document.getElementById("att_21").disabled=true;
    document.getElementById("att_22").disabled=true;
    document.getElementById("att_24").disabled=true;
    document.getElementById("grey_att3").style.color="#d1d1d1";
    document.getElementById("grey_att10").style.color="#d1d1d1";
    document.getElementById("grey_att11").style.color="#d1d1d1";
    document.getElementById("grey_att13").style.color="#d1d1d1";
    document.getElementById("grey_att14").style.color="#d1d1d1";
    document.getElementById("grey_att16").style.color="#d1d1d1";
    document.getElementById("grey_att17").style.color="#d1d1d1";
    document.getElementById("grey_att18").style.color="#d1d1d1";
    document.getElementById("grey_att19").style.color="#d1d1d1";
    document.getElementById("grey_att20").style.color="#d1d1d1";
    document.getElementById("grey_att21").style.color="#d1d1d1";
    document.getElementById("grey_att22").style.color="#d1d1d1";
    document.getElementById("grey_att24").style.color="#d1d1d1";
}
else
{
    document.getElementById("Picasso").style.display="";
    document.getElementById("Matisse").style.display="";
    document.getElementById("att_3").disabled=false;
    document.getElementById("att_10").disabled=false;
    document.getElementById("att_11").disabled=false;
    document.getElementById("att_13").disabled=false;
    document.getElementById("att_14").disabled=false;
    document.getElementById("att_16").disabled=false;
    document.getElementById("att_17").disabled=false;
    document.getElementById("att_18").disabled=false;
    document.getElementById("att_19").disabled=false;
    document.getElementById("att_20").disabled=false;
    document.getElementById("att_21").disabled=false;
    document.getElementById("att_22").disabled=false;
    document.getElementById("att_24").disabled=false;
    document.getElementById("grey_att3").style.color="";
    document.getElementById("grey_att10").style.color="";
    document.getElementById("grey_att11").style.color="";
    document.getElementById("grey_att13").style.color="";
    document.getElementById("grey_att14").style.color="";
    document.getElementById("grey_att16").style.color="";
    document.getElementById("grey_att17").style.color="";
    document.getElementById("grey_att18").style.color="";
    document.getElementById("grey_att19").style.color="";
    document.getElementById("grey_att20").style.color="";
    document.getElementById("grey_att21").style.color="";
    document.getElementById("grey_att22").style.color="";
    document.getElementById("grey_att24").style.color="";
}
if (document.checkForm2.att_12.checked)
{
    document.getElementById("Matisse").style.display="none";
}}

function showPICASSO() {
if (document.checkForm1.att_3.checked || document.checkForm2.att_10.checked || document.checkForm2.att_13.checked)
{
    document.getElementById("Bernini").style.display="none";
    document.getElementById("Matisse").style.display="none";
    document.getElementById("att_2").disabled=true;
    document.getElementById("att_5").disabled=true;
    document.getElementById("att_6").disabled=true;
    document.getElementById("att_9").disabled=true;
    document.getElementById("att_11").disabled=true;
    document.getElementById("att_14").disabled=true;
    document.getElementById("att_15").disabled=true;
    document.getElementById("att_16").disabled=true;
    document.getElementById("att_17").disabled=true;
    document.getElementById("att_18").disabled=true;
    document.getElementById("att_19").disabled=true;
    document.getElementById("att_20").disabled=true;
    document.getElementById("att_21").disabled=true;
    document.getElementById("att_23").disabled=true;
    document.getElementById("grey_att2").style.color="#d1d1d1";
    document.getElementById("grey_att5").style.color="#d1d1d1";
    document.getElementById("grey_att6").style.color="#d1d1d1";
    document.getElementById("grey_att9").style.color="#d1d1d1";
    document.getElementById("grey_att11").style.color="#d1d1d1";
    document.getElementById("grey_att14").style.color="#d1d1d1";
    document.getElementById("grey_att15").style.color="#d1d1d1";
    document.getElementById("grey_att16").style.color="#d1d1d1";
    document.getElementById("grey_att17").style.color="#d1d1d1";
    document.getElementById("grey_att18").style.color="#d1d1d1";
    document.getElementById("grey_att19").style.color="#d1d1d1";
    document.getElementById("grey_att20").style.color="#d1d1d1";
    document.getElementById("grey_att21").style.color="#d1d1d1";
    document.getElementById("grey_att23").style.color="#d1d1d1";
}
else
{
    document.getElementById("Bernini").style.display="";
    document.getElementById("Matisse").style.display="";
    document.getElementById("att_2").disabled=false;
    document.getElementById("att_5").disabled=false;
    document.getElementById("att_6").disabled=false;
    document.getElementById("att_9").disabled=false;
    document.getElementById("att_11").disabled=false;
    document.getElementById("att_14").disabled=false;
    document.getElementById("att_15").disabled=false;
    document.getElementById("att_16").disabled=false;
    document.getElementById("att_17").disabled=false;
    document.getElementById("att_18").disabled=false;
    document.getElementById("att_19").disabled=false;
    document.getElementById("att_20").disabled=false;
    document.getElementById("att_21").disabled=false;
    document.getElementById("att_23").disabled=false;
    document.getElementById("grey_att2").style.color="";
    document.getElementById("grey_att5").style.color="";
    document.getElementById("grey_att6").style.color="";
    document.getElementById("grey_att9").style.color="";
    document.getElementById("grey_att11").style.color="";
    document.getElementById("grey_att14").style.color="";
    document.getElementById("grey_att15").style.color="";
    document.getElementById("grey_att16").style.color="";
    document.getElementById("grey_att17").style.color="";
    document.getElementById("grey_att18").style.color="";
    document.getElementById("grey_att19").style.color="";
    document.getElementById("grey_att20").style.color="";
    document.getElementById("grey_att21").style.color="";
    document.getElementById("grey_att23").style.color="";
}
if (document.checkForm2.att_12.checked)
{
    document.getElementById("Matisse").style.display="none";
    document.getElementById("att_11").disabled=true;
    document.getElementById("att_14").disabled=true;
    document.getElementById("att_16").disabled=true;
    document.getElementById("att_17").disabled=true;
    document.getElementById("att_18").disabled=true;
    document.getElementById("att_19").disabled=true;
    document.getElementById("att_20").disabled=true;
    document.getElementById("att_21").disabled=true;
    document.getElementById("grey_att11").style.color="#d1d1d1";
    document.getElementById("grey_att14").style.color="#d1d1d1";
    document.getElementById("grey_att16").style.color="#d1d1d1";
    document.getElementById("grey_att17").style.color="#d1d1d1";
    document.getElementById("grey_att18").style.color="#d1d1d1";
    document.getElementById("grey_att19").style.color="#d1d1d1";
    document.getElementById("grey_att20").style.color="#d1d1d1";
    document.getElementById("grey_att21").style.color="#d1d1d1";
}
if (document.checkForm3.att_22.checked || document.checkForm3.att_24.checked)
{
    document.getElementById("Bernini").style.display="none";
}}

function showBERNPIC() {
if (document.checkForm2.att_12.checked)
{
    document.getElementById("Matisse").style.display="none";
    document.getElementById("att_11").disabled=true;
    document.getElementById("att_14").disabled=true;
    document.getElementById("att_16").disabled=true;
    document.getElementById("att_17").disabled=true;
    document.getElementById("att_18").disabled=true;
    document.getElementById("att_19").disabled=true;
    document.getElementById("att_20").disabled=true;
    document.getElementById("att_21").disabled=true;
    document.getElementById("grey_att11").style.color="#d1d1d1";
    document.getElementById("grey_att14").style.color="#d1d1d1";
    document.getElementById("grey_att16").style.color="#d1d1d1";
    document.getElementById("grey_att17").style.color="#d1d1d1";
    document.getElementById("grey_att18").style.color="#d1d1d1";
    document.getElementById("grey_att19").style.color="#d1d1d1";
    document.getElementById("grey_att20").style.color="#d1d1d1";
    document.getElementById("grey_att21").style.color="#d1d1d1";
}
else
{
    document.getElementById("Matisse").style.display="";
    document.getElementById("att_11").disabled=false;
    document.getElementById("att_14").disabled=false;
    document.getElementById("att_16").disabled=false;
    document.getElementById("att_17").disabled=false;
    document.getElementById("att_18").disabled=false;
    document.getElementById("att_19").disabled=false;
    document.getElementById("att_20").disabled=false;
    document.getElementById("att_21").disabled=false;
    document.getElementById("grey_att11").style.color="";
    document.getElementById("grey_att14").style.color="";
    document.getElementById("grey_att16").style.color="";
    document.getElementById("grey_att17").style.color="";
    document.getElementById("grey_att18").style.color="";
    document.getElementById("grey_att19").style.color="";
    document.getElementById("grey_att20").style.color="";
    document.getElementById("grey_att21").style.color="";
}
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)
{
    document.getElementById("Picasso").style.display="none";
    document.getElementById("Matisse").style.display="none";
}
if (document.checkForm1.att_3.checked || document.checkForm2.att_10.checked || document.checkForm2.att_13.checked)
{
    document.getElementById("Bernini").style.display="none";
    document.getElementById("Matisse").style.display="none";
}}

我遇到的问题的最好例子是当我选择“经济”复选框，然后选择“Tape-in Bottom Rail”复选框，然后如果我碰巧取消选择“Tape-in Bottom Rail”复选框太多复选框再次可用，我无法让它仅显示仅选中“经济”复选框应显示的内容。它就像一些不应该被启用的东西。

我希望我没有在这里添加太多，但由于这是我的第一个 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>

而这个js

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

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

score 0 · Accepted Answer

如果您了解 Angular，则可以使用它来简化您的工作。要使用它，您可以使用很多信息来帮助您，而且学习起来非常简单。在这个框架中，您可以创建您的函数，并且您只需在代码的开头定义它们，例如 . 在 .js 文件中，您只需拥有所需的操作，并阻止您的所有工作和代码。这是从事这类工作的一个非常好的建议。

javascript - 复选框选择似乎彼此不同意

1 回答 1

Related

Reference