Checklist in HTML and jQuery

Overview

This article describes how to easily create a checklist in HTML. Every item that you want to be a checkbox is included as a list item (<li>) in an unordered list (<ul>), and the jQuery code transforms every list item (i.e., <ul><li>) 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);
    });

}