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

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