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

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

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

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

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

请看下面我附上的第二张图片。我觉得没问题。但我看不到任何描述文字。

我想要实现的是

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

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

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