Jquery 如何从数组中动态创建复选框列表？

我使用数组创建了一个菜单项列表，通过循环遍历每个数组项并相应地分配属性

现在，我需要为菜单中的每个

li

项添加一个复选框。我所做的尝试是在输入

li

标记后附加一个checkbox类型的输入。但是这会创建输入框的菜单列表

问题：

如何从数组中动态创建复选框列表

这是我在脚本中用于创建菜单的当前代码：

    //Bind the country name list in sub menu
    var countries = ['United States', 'Canada', 'Argentina', 'Armenia'];
    var assetList = $('#assetNameMenu')
    $.each(countries, function(i)
    {
        var li = $('<li/>')
            .addClass('ui-menu-item')
            .attr('role', 'menuitem')
            .appendTo(assetList);
        var aaa = $('<a/>')
            .addClass('ui-all')
            .text(countries[i])
            .appendTo(li);
        var input = $('<input/>')
            .addClass('ui-all')
            .attr('role', 'checkbox')
            .appendTo(aaa);

    });



            <li>
                <a>All <span class="arrow">&#9660</span></a>
                <ul class="sub-menu" id="assetNameMenu">
                   @* li elements created in script *@
                </ul>
            </li>

//在子菜单中绑定国家名称列表
var国家=[‘美国’、‘加拿大’、‘阿根廷’、‘亚美尼亚’]；
var assetList=$（“#assetNameMenu”）
美元，每个（国家，职能（i）
{
变量li=$（“
”）
.addClass（'ui-menu-item'）
.attr（'role'，'menuitem'）
.附件（资产清单）；
var aaa=$（'

其目的是动态创建复选框项目列表：

               <li>
                    <a>Default <span class="arrow">&#9660</span></a>
                    <ul class="sub-menu" id="assetNameMenu">
                        <li><a href="#" class="small" data-value="option1" tabindex="-1"><input type="checkbox" />&nbsp;Option 1</a></li>
                        <li><a href="#" class="small" data-value="option2" tabindex="-1"><input type="checkbox" />&nbsp;Option 2</a></li>
                        <li><a href="#" class="small" data-value="option3" tabindex="-1"><input type="checkbox" />&nbsp;Option 3</a></li>
                        <li><a href="#" class="small" data-value="option4" tabindex="-1"><input type="checkbox" />&nbsp;Option 4</a></li>
                        <li><a href="#" class="small" data-value="option5" tabindex="-1"><input type="checkbox" />&nbsp;Option 5</a></li>
                        <li><a href="#" class="small" data-value="option6" tabindex="-1"><input type="checkbox" />&nbsp;Option 6</a></li>
                    </ul>
                </li>

这将产生以下结果：

---

您需要将类型设置为

复选框

：

.attr（'type'，'checkbox'）

$。每个国家/地区、职能（i）
{
变量li=$（“
”）
.addClass（'ui-menu-item'）
.attr（'role'，'menuitem'）
.附件（资产清单）；
变量aaa=$（''）
.addClass（'ui-all'）
.案文（国家[一]）
.附件（李）；
变量输入=$（''）
.addClass（'ui-all'）
.attr（'type'，'checkbox'）
.附件（aaa）；
});

您需要将类型设置为

复选框

：

.attr（'type'，'checkbox'）

$。每个国家/地区、职能（i）
{
变量li=$（“
”）
.addClass（'ui-menu-item'）
.attr（'role'，'menuitem'）
.附件（资产清单）；
变量aaa=$（''）
.addClass（'ui-all'）
.案文（国家[一]）
.附件（李）；
变量输入=$（''）
.addClass（'ui-all'）
.attr（'type'，'checkbox'）
.附件（aaa）；
});

只需为输入和变更单设置正确的类型：

$.each(countries, function(i)
    {
        var li = $('<li/>')
            .addClass('ui-menu-item')
            .attr('role', 'menuitem')
            .appendTo(assetList);

        var input = $('<input/>')
            .addClass('ui-all')
            .attr('type', 'checkbox')
            .appendTo(li);

       var aaa = $('<a/>')
            .addClass('ui-all')
            .text(countries[i])
            .appendTo(li);

    });

---

示例：

只需为输入和变更单设置正确的类型：

$.each(countries, function(i)
    {
        var li = $('<li/>')
            .addClass('ui-menu-item')
            .attr('role', 'menuitem')
            .appendTo(assetList);

        var input = $('<input/>')
            .addClass('ui-all')
            .attr('type', 'checkbox')
            .appendTo(li);

       var aaa = $('<a/>')
            .addClass('ui-all')
            .text(countries[i])
            .appendTo(li);

    });

---

示例：

您的代码基本上已经在这样做了，您只需要嵌套复选框数组循环并修改HTMLaccordingly@RoryMcCrossan您的意思是将另一个$.each放在外部$.each中？似乎我当前的实现没有将输入转换为类型checkbox。非常确定

.attr（'role'，'checkbox'）

应该是

.attr（'type'，'checkbox'）

交互元素（如

）不能嵌套在另一个交互元素（如

或

）中。您的代码几乎已经在这样做了，您只需要嵌套复选框数组循环并修改HTMLaccordingly@RoryMcCrossan您的意思是将另一个$.each放入外部$.each？似乎我当前的实现没有将输入的转换为类型checkbox。非常确定

.attr（'role'，'checkbox'））

应该是

.attr（'type'，'checkbox'）

交互元素（如

）不能嵌套在另一个交互元素（如

，或

）中。我尝试了以下更好的方法，但是复选框出现在每个国家名称的上方，而不是名称的左侧。你知道为什么吗？如果你也发布css，我们可以看到显示问题。尝试了，但复选框是交错的。这是指向我设置为显示的菜单的css的链接：内联块-上面没有“也不起作用，但将属性

float:left

添加到li标签的CSS中修复了对齐问题。请随意将其添加到您的答案中。我尝试了以下方法，效果更好，但复选框显示在每个国家名称的上方，而不是名称的左侧。知道原因吗？如果您也发布CSS，我们可以看到显示问题。”但是复选框是交错的内联。这是一个指向我设置为显示的菜单的css的链接：内联块-上面的操作也不起作用，但是将属性

float:left

添加到li标签的css中修复了对齐。请随意添加到您的答案中。

.sub-menu {
 width: auto;
 [...]
}

.sub-menu li a { 
  text-align: left;
  [...]
}