web
You’re offline. This is a read only version of the page.
close
Skip to main content

Notifications

Announcements

No record found.

News and Announcements icon
Community site session details

Community site session details

Session Id :
Dynamics 365 Community / Forums / Microsoft Dynamics CRM (Archived) / How to show multiple c...
Microsoft Dynamics CRM (Archived)

How to show multiple checkboxes in a series format dynamically using JS and HTML?

(0) ShareShare
ReportReport
Posted on by Arun Potti 1,442

I have a below requirement to show multiple checkboxes in a format (nXn) dynamically,

Input:

Checkbox 1

Checkbox 2

Checkbox 3

Checkbox 4

Checkbox 5

Checkbox 6

Checkbox 7

-------

Output:

Checkbox 1                   Checkbox 2                 Checkbox 3               Checkbox 4          Checkbox 5

Checkbox 6                   Checkbox 7                 -------------                 -------------         -------------

-------------                    -------------                 -------------                 -------------         -------------

*This post is locked for comments

I have the same question (0)
  • Suggested answer
    Nithya Gopinath Profile Picture
    Nithya Gopinath 17,078 on at

    Hi Arun Potti,

    See the links below:

    stackoverflow.com/.../creating-the-checkbox-dynamically-using-javascript

    www.htmlgoodies.com/.../display-array-data-in-an-a-tabular-format.html

  • Suggested answer
    Nadeeja Bomiriya Profile Picture
    Nadeeja Bomiriya 6,804 on at

    Hi Arun,

    Please see below code sample.

    <html>
<head>
    <script src="code.jquery.com/jquery-3.1.1.min.js"></script>
    <script type="text/javascript">
        var list = ["Red", "Green", "Blue", "White", "Black", "Pink", "Brown", "Purple", "Yellow"];

        $(document).ready(function() {

            $.each(list, function( index, value ) {
              $("#parent_div").append('<input type="checkbox" name="myGroup" value="' + value + '"><label>' + value + '</label>');
            });

        });

    </script>
    <style>

    </style>
</head>
<body>
    <div id="parent_div">
    </div>
</body>
</html>


    Here's the output.

    Checkbox-Output.PNG

    You can now add some CSS to make it pretty :).

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

Quick Links

Responsible AI policies

As AI tools become more common, we’re introducing a Responsible AI Use…

Neeraj Kumar – Community Spotlight

We are honored to recognize Neeraj Kumar as our Community Spotlight honoree for…

Congratulations to the November Top 10 Community Leaders!

These are the community rock stars!

Leaderboard > 🔒一 Microsoft Dynamics CRM (Archived)

#1
SA-08121319-0 Profile Picture

SA-08121319-0 4

#1
Calum MacFarlane Profile Picture

Calum MacFarlane 4

#3
Alex Fun Wei Jie Profile Picture

Alex Fun Wei Jie 2

Last 30 days Overall leaderboard

Featured topics

Product updates

Dynamics 365 release plans