Today I had a need to create a dynamic list of checkboxes, and I wanted them all aligned properly, so the results would look something like this:
The layout was simple with CSS, then I added some jQuery to simulate getting the checkbox items dynamically.
Example:
<html>
<head>
<title>Simple repeater</title>
<style type="text/css">
.repeater { list-style-type: none; }
.repeater li { float: left; width: 150px; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function()
{
var names = ["Tanya", "Julia", "Avery", "Dave", "Robert", "Howard", "Greg", "Scott"];
for (i = 0; i < names.length; i++)
{
$("#peopleCheckboxGroup")
.append("<li><input type='checkbox' />" + names[i] + "</li>")
}
});
</script>
</head>
<body>
<ul id="peopleCheckboxGroup" class="repeater"></ul>
</body>
</html>
That example produces a list that adjusts appropriately when resized:
