You’re offline. This is a read only version of the page.
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
Hi Arun,
Please see below code sample.
Share
Report
All responses (
Answers (
<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.
You can now add some CSS to make it pretty :).
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
Stay up to date on forum activity by subscribing. You can also customize your in-app and email Notification settings across all subscriptions.
#1
André Arnaud de Cal...
291,240
Super User 2024 Season 2
#2
Martin Dráb
230,149
Most Valuable Professional
#3
nmaenpaa
101,156