Jasinski Technical Wiki

Navigation

Home Page
Index
All Pages

Quick Search
»
Advanced Search »

Contributor Links

Create a new Page
Administration
File Management
Login/Logout
Your Profile

Other Wiki Sections

Software

PoweredBy

Page History: Checklist in HTML and jQuery

Compare Page Revisions



« Older Revision - Back to Page History - Newer Revision »


Page Revision: Fri, Nov 04, 2011, 9:49 AM


Using the Code

<html>
<head>
<script type='text/javascript' src='http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.min.js'></script>
<script type='text/javascript' src='checklist.js'></script>
<style type='text/css'>
h2{ margin-bottom: 0px; padding-bottom:0px;}
ul{ margin-left: -45px; margin-top:0px;}
</style>
</head>
<body>
<h1>My Checklist</h1>

<h2>Section 1</h2>
<ul>
    <li>Item 1
    <li>Item 2
    <li>Item 3
    <li>Item 4
    <li>Item 5
</ul>

<h2>Section 2</h2>
<ul>
    <li>Item 6
    <li>Item 7
    <li>Item 8
    <li>Item 9    
</ul>

</body>
</html>

Reusable Code

checklist.js — place in the same folder as the HTML file above 
$(document).ready(function(){ transformList(); });
/*===============================================================================================*/
function transformList(){

    $("ul").each(function(n){
        
        var html = "";
        html += "<table cellpadding='3'>";
        
        $(this).find("li").each(function(m){
        
            var id = n * 100 + m;
        
            html += "<tr><td>";
            html += "<input type='checkbox' id='chk-";
            html += id;
            html += "'/>";
            html += "</td><td>";
            html += "<label for='chk-";
            html += id;
            html += "'>";
            html += $(this).text();
            html += "</label>";
            html + "</td></tr>";
        
        });
        
        
        html += "</table>";
        $(this).html(html);
    });

}

ScrewTurn Wiki version 3.0.1.400. Some of the icons created by FamFamFam. Except where noted, all contents Copyright © 1999-2024, Patrick Jasinski.