動態創建複選框計算，無法正常顯示

Question

我有一個javascript函數，通過drop_down的選擇創建複選框。當我點擊添加按鈕時，系統將創建帶有值的複選框。

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); 
    } 

我做了一些截圖來解釋我目前的問題。請檢查我的截圖以獲得更清晰的圖片。

這是這樣的，像冰淇淋一個項目，客戶可以添加許多配料例如，果仁，果凍等

然後，我有另一種problem.Created複選框的不顯示。我只能看到方框

請看我下面的第二張附圖。看起來好吧，但我看不到任何描述文本。

我所試圖實現的是

1. 顯示選擇
2. 計算的項目，他們將與選中的值產生。我已經實現了刪除生成的澆頭的代碼。所以我想計算生成項目的總價值，它們應該是可以改變的。

例子。如果刪除生成的項目。總澆頭應該減少。感謝您的幫助。

Answer 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); 
} 

對於你的第二個問題，下面是修改後的代碼：要計算總計的車，你需要定義一個函數（假設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事件觸發時，應該觸發此方法。

Answer 2

我想這個答案應與複選框文本解決您的問題：https://stackoverflow.com/a/10143276/1492792