0

「ほぼ」完了したプロジェクトがあります。私はここでたくさんの助けを得て、このプロジェクトをすぐに完成させたいと思っています。3 つの異なる項目の異なる属性を表すチェックボックスを含むフォームがあります。ユーザーが特定のチェックボックスをチェックすると、非表示に対応していないアイテムがあり、チェックされた属性と一致しない属性は無効になり、テキストの色が薄い灰色になります。したがって、まだアクティブなボックスは、そのアイテムと一緒に使用されるボックスのみです。

私はそれをすべてうまく機能させることができます（私は思う）。ただし、複数の項目に対応する属性がいくつかあります。私の例を見ると（リンクが提供されています）

「エコノミー」チェックボックスをオンにすると、灰色のボックス「ベルニーニ」が 1 つだけ表示され、他の多くのチェックボックスが無効になります。これは正しいです。チェックを外すと、すべてが有効になり、再び表示されます。

'Tape-in​​ Bottom Rail' チェックボックスをオンにすると、2 つの灰色のボックス 'Bernini & Picasso' が表示されます。これは、属性 'Tape-in​​ Bottom Rail' が両方に適用されるため、正しいものです。チェックを外すと、すべてが有効になり、再び表示されます。

私が抱えている問題は、「エコノミー」と「テープイン ボトム レール」の両方をチェックしてから、どちらかのチェックを外すと、間違った属性が有効になり、表示されている灰色のボックスが正しく対応しなくなることです。

「else if」または別の「if」ステートメントを使用する必要がありますが、そうであれば、それを正しく機能させる方法がわかりません。

これが私がこれまでに使用しているJSです。これは関数の1つだけです。

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に慣れていないため、コードをまだ理解しているところでこれを維持したいと思います.

4

0 に答える 0