2

drop_down の選択によってチェックボックスを作成する JavaScript 関数があります。追加ボタンをクリックすると、システムは値を含むチェックボックスを作成します。

function addElement() 
    {

      var e= document.getElementById('top-addon');
      var tops = e.options[e.selectedIndex].text;
      var tops_value=e.options[e.selectedIndex].value;

     // alert(tops_value);

      var ni = document.getElementById('myDiv');

      num += 1;
      //var newdiv = document.createElement('div');

      var countedName = num;

     // newdiv.setAttribute('id',Name);

        var x = document.createElement("input");
        x.type = "checkbox";
        x.name = "toppings[]";
        x.setAttribute('id',countedName);
        x.checked = true;
        x.value = tops_value;   
        //var inner_text = tops + '<a href=\'#\' onclick=\'removeElement('+countedName+')\'> [x] </a>';
        //var text= document.createTextNode(inner_text);
        x.innerHTML=tops;

        ni.appendChild(x);
        //ni.appendChild(inner_text);
    }

現在の問題を説明するために、いくつかのスクリーンショットを作成しました。より鮮明な画像については、スクリーンショットを確認してください。

ここに画像の説明を入力

こんな感じで、アイスクリームのような商品に、ナッツやゼリーなどのトッピングをたくさん追加できます。

次に、別の問題があります。作成されたチェックボックスが表示されません。四角い箱しか見えない

下の 2 番目の添付画像を参照してください。問題ないように見えますが、説明テキストが表示されません。 ここに画像の説明を入力

私が達成しようとしているのは

  1. 選択を表示する
  2. アイテムを計算し、チェックされた値で生成されます。生成されたトッピングを削除するコードは既に達成しています。だから私は生成されたアイテムの合計値を計算したいのですが、それらは変更可能でなければなりません。

例。生成されたアイテムを削除する場合。トッピングの合計が減るはずです。よろしくお願いします。

4

2 に答える 2

1

最初の問題: チェックボックスのテキストを表示するには、チェックボックスをラベル内に配置する必要があります。ここにあなたのための修正されたコードがあります

function addElement() 
{

    var e= document.getElementById('top-addon');
    var tops = e.options[e.selectedIndex].text;
    var tops_value=e.options[e.selectedIndex].value;

    // alert(tops_value);

    var ni = document.getElementById('myDiv');

    num += 1;
    //var newdiv = document.createElement('div');

    var countedName = num;

    // newdiv.setAttribute('id',Name);

    var x = document.createElement("input");
    x.type = "checkbox";
    x.name = "toppings[]";
    x.setAttribute('id',countedName);
    x.checked = true;
    x.value = tops_value;   
    //x.innerHTML=tops; We don't need to set text to checkbox.

    /* These lines are added */
    var label = document.createElement("label");


    label.appendChild(x);

    var span = document.createElement("span");
    span.innerText = tops;

    label.appendChild(span);

    /* End of added lines */

    // Beware that we are adding label to div, instead of checkbox.
    ni.appendChild(label);
}

2 番目の問題: カートの総計を計算するには、次の疑似コードを実装する関数 (calculateTotal としましょう) を定義する必要があります。

function calculateTotal
begin
        get all checkboxes under myDiv
        for each selected check box
        begin
                get check box id
                get substring of id, after comma (",")
                add substring (price) to total
        end
end

このメソッドは、ユーザーがアイテムの追加ボタン、アイテムの削除ボタンをクリックし、チェックボックスの onChange イベントが発生するたびにトリガーされる必要があります。

于 2013-04-22T08:35:41.160 に答える