Monaca でメモ帳アプリを開発している者です。

以下の記述のようなメモ帳テンプレートを元に作っているのですが、メモ一覧の各項目の頭に「確認済み」を意味するチェックボックスを設けたいと思っています。

input type="checkbox" を TOP Page の ul の前に入れて ul 以下を label で囲ってしまうと、メモが複数になったときにそのすべてを包括する1つのチェックリストのみが表示されてしまいます。 ul の中に記述して、メモそれぞれにチェックボックスを設けるためにはどうしたらいいでしょうか。

ご教授の程、どうぞよろしくお願い致します。

～～～index.html～～～

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="components/loader.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

    <!-- TOP Page -->
    <div data-role="page" id="TopPage">
        <header data-role="header" data-position="fixed" data-theme="c">
            <h1>メモ帳</h1>
            <a href="#AddPage" data-icon="plus" class="ui-btn-right">メモを追加</a>
        </header>
        <section data-role="content">
            <ul id="TopListView" data-role="listview" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d" data-split-icon="delete">       
            </ul>
        </section>
    </div>

    <!-- Add Memo Page -->
    <div data-role="page" id="AddPage">
        <header data-role="header" data-position="fixed" data-theme="c">
            <a data-role="button" data-rel="back" data-icon="back">戻る</a>
            <h1>新しいメモ</h1>
        </header>
        <section data-role="content">
            <label for="Memo"></label>
            <textarea id="Memo"></textarea>
            <a data-role="button" data-icon="check" id="SaveBtn">保存</a>
        </section>
    </div>

    <!-- Detail Page -->
    <div data-role="page" id="ShowPage">
        <header data-role="header" data-position="fixed" data-theme="c">
            <a data-role="button" data-rel="back" data-icon="back">戻る</a>
            <a href="#EditPage" data-theme="b" class="ui-btn-right" id="EditBtn">編集</a>
            <h1></h1>
        </header>
        <section data-role="content">
            <p></p>
        </section>
    </div>

    <!-- Edit Memo Page -->
    <div data-role="page" id="EditPage">
        <header data-role="header" data-position="fixed">
            <a data-role="button" data-rel="back" data-icon="back">戻る</a>
            <h1>メモを編集</h1>
        </header> 
        <section data-role="context">
            <input id="edit" type="text">

            <button onclick="saveEditedMemo()">上書き保存</button>
        </section>
    </div>

<script src="components/loader.js"></script>
<script src="js/memo.js"></script>
<script src="js/app.js"></script>
<script src="js/cssua.min.js"></script>
</body>
</html>

～～～app.js～～～

///// Save memo and return to top page
function onSaveBtn() {
    var text = $("#Memo").val();
    if (text != '') {
        // Save to local storage
        addMemo(text);
        // Clear form
        $("#Memo").val("");
        // Initialize top page
        initTopPage();
    }
    $.mobile.changePage("#TopPage", { reverse: true });
}

///// Initialize top page
function initTopPage() {
    $("#TopListView").empty();

    var list = getMemoList();
    for (var i in list) {
        var memo = list[i];
        var d = new Date(memo.time);
        var date = d.getFullYear() + "/" + (d.getMonth() + 1) + "/" + d.getDate();

        $li = $("<li><a href='#' class='show'><h3></h3><p></p></a><a href='#' class='delete'>Delete</a></li>");
        $li.data("id", memo.id);
        $li.find("h3").text(date);
        $li.find("p").text(memo.text);
        $("#TopListView").prepend($li);
    }
    if (list.length == 0) {
        $li = $("<li>メモがありません</li>");
        $("#TopListView").prepend($li);
    }
    $("#TopListView").listview("refresh");  // Call refresh after manipulating list
}

///// Move to detail page
function onShowLink() {
    var $li = $(this).parent();
    selectedMemoId = $(this).parents('li').data("id");    
    var memoTitle = $li.find("h3").text();
    var memoHtml = $li.find("p").html().replace(/\n/g, "<br>");

    $("#ShowPage h1").text(memoTitle);
    $("#ShowPage p").html(memoHtml);
    $.mobile.changePage("#ShowPage");
}

///// Delete memo
function onDeleteLink() {
    if (!confirm("このメモを削除しますか？")) {
      return;
    }
    var $li = $(this).parent();
    var id = $li.data("id");
    deleteMemo(id);

    initTopPage();

    // Return to top
    $.mobile.changePage("#TopPage", { reverse: true });
}

///// Called when app launch
function onReady() {
    initTopPage();
    $("#SaveBtn").click(onSaveBtn);
    $("#TopListView").on("click", "a.show", onShowLink);
    $("#TopListView").on("click", "a.delete", onDeleteLink);
}

///// Edit memo
function saveEditedMemo() {

    var editedText = $("#EditPage input#edit").val();

    if (editedText != '') {

        deleteMemo(selectedMemoId);

        addMemo(editedText);
        // Clear form
        $("#Memo").val("");
        // Initialize top page
        initTopPage();
    }
    $.mobile.changePage("#TopPage", { reverse: true });
}

$(onReady); // on DOMContentLoaded

～～～memo.js～～～

<!-- language: lang-javascript -->
///// Return list of memo
function getMemoList() {
    var list = localStorage.getItem("memo_list");
    if (list == null) {
        return new Array();
    } else {
        return JSON.parse(list);
    }
}

///// Save memo
function saveMemoList(list) {
    try {
        localStorage.setItem("memo_list", JSON.stringify(list));
    } catch (e) {
        alert('Error saving to storage.');
        throw e;
    }
}

///// Add memo
function addMemo(text) {
  var list = getMemoList();
  var time = new Date().getTime();
  list.push({ id: time, time: time, text: text });
  saveMemoList(list);
}

///// Delete specified memo
function deleteMemo(id) {
    var list = getMemoList();
    for (var i in list) {
        if (list[i].id == id) {
            list.splice(i, 1);
            break;  // Quit for loop when found
        }
    }
    saveMemoList(list);
}