javascript - チェックボックスの選択が互いに一致していないようです

Question

わかりました、JavaScript を使用して作業するプロジェクトが与えられました (まだ学習中です)。基本的に、ユーザーが選択できるチェックボックス (属性) のリストが必要です。ユーザーがこれらの異なる属性を選択するため、選択した属性に対応する情報を持つ別の 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";
}}

私が抱えている問題の最も良い例は、「エコノミー」チェックボックスを選択し、次に「テープインボトムレール」チェックボックスを選択し、「テープインボトムレール」チェックボックスの選択を解除すると、チェックボックスが多すぎることです再び利用できるようになりましたが、「エコノミー」チェックボックスが選択されているだけで表示されるはずのものだけを表示することができません。有効にすべきではないものが有効になっているようです。

ここに追加しすぎていないことを願っていますが、これが私の最初の 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つしかない場合は機能しますが、両方のクラスを実行するとすぐに機能しなくなります。

javascript - チェックボックスの選択が互いに一致していないようです

1 に答える 1

Related

Reference