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

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. 计算项目，它们将生成检查值。我已经实现了删除生成的浇头的代码。所以我想计算生成项目的总价值，它们应该是可变的。

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

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