Question

我有一个带有这样标签的复选框：

<input type="checkbox" id="box1"/>
<label for="box1">Option 1</label>

这会按预期呈现，并且还有额外的奖励，您可以点击标签的文本来选中/取消选中该复选框。

如果我使用jquery动态添加更多复选框和标签，如下所示：

var optionsPanel = $("#optionsInnerWrapper");
    for(var i = 0; i < allOptions.length; i++)
    {
        optionsPanel.append("<div style='padding:2px;''><input id='box"+i+"' class='filterType' type='checkbox' value='"+allOptions[i]+"'><label for='box'"+i+"''>"+allOptions[i]+"</label></div>");
    }

所有内容都可以正常显示，但点击标签不会选中或取消选中相应的复选框。为什么会这样，我可以用另一种方式实现这种效果吗？

Answer 1

"'><label for='box'"+i+"''>"

应该是

"'><label for='box"+i+"'>"

原文中有额外的单引号。

Answer 2

你的jquery代码不对。

        optionsPanel.append("<div style='padding:2px;''><input id='box"+i+"' class='filterType' type='checkbox' value='"+allOptions[i]+"'><label for='box"+i+"'>"+allOptions[i]+"</label></div>");

我改变了什么？

你这里有太多了：<label for='box'"+i+"''>"+allOptions[i]+"</label>

<label for='box'"+i+"''>"+allOptions[i]+"</label>

<label for='box"+i+"'>"+allOptions[i]+"</label>

动态添加时，HTML标签不会附加到输入

2 个答案: