How to dynamically create a list of checkboxes from an array?

Question

I've created a menu item list using an array by looping through each array item and assigning attributes accordingly.

Now I need to append a checkbox to each li item in the menu. What I did try is appending an input of type checkbox following by appending an input li tag. But this creates a menu list of input boxes.

Question:

How can you dynamically create a list of checkboxes from an array?

This is the current code I use in the script to create the menu:

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

Which creates the following with no checkboxes:

The aim is instead to dynamically create a list of checkbox items:

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

Which creates this the below:

Your code is pretty much already doing that, you would just need to nest the checkbox array loop and amend the HTML accordingly — Rory McCrossan
– Rory McCrossan, Commented Aug 15, 2016 at 12:31
@RoryMcCrossan you mean place another $.each inside the outer $.each? It seems my current implementation isn't converting the input's to type checkbox. — Brian Var
– Brian Var, Commented Aug 15, 2016 at 12:36
pretty sure .attr('role', 'checkbox') should be .attr('type', 'checkbox') — ADyson
– ADyson, Commented Aug 15, 2016 at 12:36
An interactive element (such as an <input>) cannot be nested within another interactive element (such as an <a>, or <button>). — David Thomas
– David Thomas, Commented Aug 15, 2016 at 12:41

score 4 · Accepted Answer · 2016-08-15 13:12:59Z

4

Just set the correct type for inputs and change order:

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

UPDATE

For display:

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

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

Example: https://codepen.io/anon/pen/JKxwoO

edited Aug 15, 2016 at 13:12

answered Aug 15, 2016 at 12:36

user5201742

Sign up to request clarification or add additional context in comments.

4 Comments

Brian Var Over a year ago

I tried the following hastebin.com/oxajoqepon.vhdl which is better but the checkboxes appear above each country name, instead of to the left of the name. Any ideas why? picpaste.com/pics/options-MetOescC.1471265089.PNG

user5201742 Over a year ago

If you post the css too, we could see the display problem

Brian Var Over a year ago

Tried that but the checkboxes are staggered inline. picpaste.com/pics/option-cam7UI9t.1471265596.PNG This is a link to the css for that menu which I've set to display: inline-block - hastebin.com/ujavilofid.css

Brian Var Over a year ago

The above didn't work either, but adding property float: left to the li tag's CSS fixed the alignment. Feel free to add that to your answer.

Mustapha Larhrouch · Accepted Answer · 2016-08-15 12:36:05Z

0

you need to set the type to 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);

    });

answered Aug 15, 2016 at 12:36

Mustapha Larhrouch

3,4053 gold badges16 silver badges29 bronze badges

Collectives™ on Stack Overflow

How to dynamically create a list of checkboxes from an array?

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related