

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

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

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

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

_～～～index.html～～～_

[code]

    <!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>
    
[/code]

_～～～app.js～～～_

[code]

    ///// 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
    
[/code]

_～～～memo.js～～～_

[code]

    <!-- 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);
    }
    
[/code]


CC BY-SA 3.0
2015-02-25T22:16:05.680
7100
2016-02-22T09:56:09.247
2015-02-26T23:28:26.090
3516
8373
question
javascript monaca html
自作のメモ一覧アプリケーションにチェックボックスを導入する方法


TopListViewのメモ一覧を作成しているのは **app.js** なので、処理を追加するならこっちですね。  
ただ、単純に`input`を追加すると見た目が不恰好になるようなので、その辺は調べる必要がありそうです。

[code]

    ///// 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 = $("<li><input type='checkbox' /><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
    }
    
[/code]

----- コメントに対する追記 -----

> メモ一覧自体が表示されなくなってしまいました

おそらく途中でエラーが発生しているのだと思います。  
こちらでは`style`指定で大きくすることができました。  
`style`の値を`"`で囲っていたりしないでしょうか？

ブラウザによって`style`指定以外にも色々な方法があるようですので参考として貼っておきます。  
[チェックボックスやラジオボタンを大きくする方法](http://www.koikikukan.com/archives/2014/08/21-001111.php)

> 一度入れたチェックをその後も保存できるようにする

回答に記載した実装だとチェックボックスのデフォルト値を設定していないため、  
初期表示時にチェックは入らないです。  
`$li.find("p").text(memo.text)`と同じように`input`に対してチェック状態を反映してあげる必要があります。

値の保存については`memo.js`を修正すればいけると思います。  
また、チェック状態の反映については[こちらのサイト](http://webhako.net/jquery/checkbox-set-
value/)が参考になると思います。

----- 質問の追記部分に対する追記 -----

差し出がましいですが、まず、サンプルアプリがどこで何をやっているかについて一通り読み取る所から始めた方が良いと思います（一覧表示時の処理、ボタン押下時の処理等）。  
※サンプルの規模ならそれほど難しくないので取り掛かりやすいですし、この先役に立つと思います。

ポイントになりそうな所をざっと記載すると

  * getMemoList：localStorageから保存情報を取得
  * addMemo：新規メモを保存
  * saveMemoList：localStorageにデータを保存

となっています。  
保存するデータを用意しているのは`addMemo`ですが、今回のチェック状態の保存は新規メモ追加とは別のトリガーで発生するため、新たに`function`を追加する必要があります。

addMemo：メモ追加画面で「保存」押下時  
追加`function`：一覧画面でチェック状態変更時？

あとは試行錯誤しながら楽しんでやってみてください。


CC BY-SA 3.0
2015-02-26T06:32:33.387
7123
2015-02-27T01:38:12.727
2015-02-27T01:38:12.727
3516
3516
7100
answer