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

我有一个javascript函数，通过下拉菜单的选择创建复选框。当我单击add按钮时，系统将创建带有值的复选框

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

函数addElement（）
{
var e=document.getElementById（'top-addon'）；
var tops=e.options[e.selectedIndex].text；
var tops\u value=e.options[e.selectedIndex].value；
//警报（最高值）；
var ni=document.getElementById（'myDiv'）；
num+=1；
//var newdiv=document.createElement（'div'）；
var countedName=num；
//newdiv.setAttribute（'id'，名称）；
var x=document.createElement（“输入”）；
x、 type=“checkbox”；
x、 name=“浇头[]”；
x、 setAttribute（'id'，countedName）；
x、 选中=正确；
x、 值=最大值；
//变量内部文本=顶部+“”；
//var text=document.createTextNode（内部文本）；
x、 innerHTML=顶部；
ni.儿童（x）；
//ni.追加子项（内部文本）；
}

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

就像这样，对于像冰淇淋这样的商品，顾客可以添加许多配料，例如坚果、果冻等

然后我有另一个问题。创建的复选框不显示。我只能看到方形的盒子

请看我下面的第二张图片。我觉得还可以。但我看不到任何描述文字。

我想要达到的是

显示选择

计算这些项目，它们将以选中的值生成。我已经实现了代码删除生成的浇头。所以我想计算生成项目的总价值，它们应该是可变的

---

例如。如果需要，请删除生成的项。总的浇头应该减少。提前感谢您的帮助。

我想这个答案应该通过复选框文本来解决您的问题：

对于您的第一个问题：为了显示复选框的文本，您应该将复选框放在标签内。这是为您修改的代码

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

---

每当用户单击AddItem按钮、RemoveItem按钮以及checkboxs的onChange事件激发时，都应该触发此方法

我所需要实现的是简单的，当一个浇头是添加更新总数。如果要使用复选框显示文本，则需要使用复选框创建关联的标签元素。让我尝试一下，然后再与您联系。ThanksI使其用于dynmaic添加和删除，但仍在复选框计算步骤中堆叠：(