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

Posted 2023-05-09

【中文标题】如何从数组动态创建复选框列表？

【英文标题】：How to dynamically create a list of checkboxes from an array?

【发布时间】：2016-12-21 15:52:25

【问题描述】：

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

现在我需要为菜单中的每个li 项目添加一个复选框。我所做的尝试是通过附加输入 li 标记来附加类型复选框的输入。但这会创建一个输入框的菜单列表。

问题：

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

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

    //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>

这会创建以下不带复选框的内容：

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

               <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>

这会创建以下内容：

【问题讨论】：

您的代码几乎已经在这样做了，您只需要嵌套复选框数组循环并相应地修改 html

@RoryMcCrossan 您的意思是在外部 $.each 中放置另一个 $.each？看来我当前的实现没有将输入转换为类型复选框。

很确定 .attr('role', 'checkbox') 应该是 .attr('type', 'checkbox')

一个交互元素（例如<input>）不能嵌套在另一个交互元素（例如<a>，或<button>）中。

【参考方案1】：

只需为 inputs 设置正确的类型并更改顺序：

$.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);

    );

Codepen：https://codepen.io/anon/pen/oLmQRp

更新

用于展示：

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


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

示例：https://codepen.io/anon/pen/JKxwoO

【讨论】：

我尝试了以下hastebin.com/oxajoqepon.vhdl 更好，但复选框出现在每个国家/地区名称上方，而不是名称左侧。任何想法为什么？ picpaste.com/pics/options-MetOescC.1471265089.PNG

如果您也发布 css，我们可能会看到显示问题

试过了，但复选框是内联的。 picpaste.com/pics/option-cam7UI9t.1471265596.PNG这是我设置显示的菜单的css链接：inline-block - hastebin.com/ujavilofid.css

上述方法也不起作用，但将属性 float: left 添加到 li 标签的 CSS 修复了对齐方式。随意将其添加到您的答案中。

【参考方案2】：

您需要将类型设置为checkbox：.attr('type', 'checkbox')

$.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('type', 'checkbox')
            .appendTo(aaa);

    );