Jasinski Technical Wiki


Home Page
All Pages

Quick Search
Advanced Search »

Contributor Links

Create a new Page
File Management
Your Profile

Other Wiki Sections



Checklist in HTML and jQuery

Modified on Fri, Nov 04, 2011, 9:53 AM by Administrator Categorized as JavaScript, jQuery, and Angular


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='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;}
<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>";


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