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

Page History: Checklist in HTML and jQuery

Compare Page Revisions

« Older Revision - Back to Page History - Current Revision

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

Overview¶

This article describes how to easily create a checklist by transforming every list item (i.e.,

) on your page to a checkbox.

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);
    });

}

Jasinski Technical Wiki