动态创建的复选框计算，未正确显示

Question

我有一个javascript函数，可以通过drop_down的选择创建Checkbox。当我点击添加按钮时，系统将创建带有值的复选框。

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

我做了一些截图来解释你当前的问题。请查看我的屏幕截图以获得更清晰的图片。

就像这样，对于像冰淇淋这样的物品，顾客可以添加许多浇头例如坚果，果冻等。

然后我有另一个问题。未显示已处理的复选框。我只能看到方框

请看下面我的第二张照片。感谢给我看。但我看不到任何描述文字。

我想要实现的是

1. 显示选择
2. 计算项目，将生成带有检查值的项目。我已经实现了删除生成的toppings的代码。所以我想计算生成项目的总价值，它们应该是可以改变的。

实施例。如果删除生成的项目。总配料应该减少。谢谢你的帮助。

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 events fire时，都应触发此方法。

Answer 2

我想这个答案应该通过复选框文本解决您的问题：https://stackoverflow.com/a/10143276/1492792