Checklist in HTML and jQuery


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

<script type='text/javascript' src=''></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;}
<h1>My Checklist</h1>

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

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


Reusable Code

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

        var html = "";
        html += "<table cellpadding='3'>";
            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>";