ybootin/checklist.html

## checklist.html
<!doctype html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

        <style>
            .checked {
                background-color: #CCCCCC;
            }

            .item {
                list-style-type: none;
            }

            .item-info {
                display:none;
                float:right;
            }

            .checked .item-info {
                display: block;
            }
        </style>

        <script type="text/javascript">

        var json = {
            "title": "ma checklist",
            "checklist" : [
                {"title" : "item 1", "checked" : "text checked"} ,
                {"title" : "item 2", "checked" : "text checked"} ,
                {"title" : "item 3", "checked" : "text checked"} ,
            ]
        };


        $(document).ready(function() {
            // retrieve json file

            // $.getJSON('checklist.json', function(data) {
                var data = json;

                $('h1').html(data.title);

                var cnt = document.getElementById('checklist-content');

                $.each(data.checklist, function(k, v) {
                    var elt = document.createElement('div');

                    elt.innerHTML = '<div class="item"><span>' +  v.title + '</span><span class="item-info">' + v.checked + '</span></div>';

                    $(elt).click(function() {
                        if ($(this).hasClass('checked')) {
                            $(this).removeClass('checked');
                        }
                        else {
                            $(this).addClass('checked');
                        }

                    });
                    cnt.appendChild(elt);
                });
            });

        // });
        </script>
    </head>
    <body>
        <div class="container-fluid" id="container">
            <h1>Title</h1>
            <div id="checklist-content">

            </div>
        </div>

    </body>
</html>
	<!doctype html>
	<html>
	<head>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

	<style>
	.checked {
	background-color: #CCCCCC;
	}

	.item {
	list-style-type: none;
	}

	.item-info {
	display:none;
	float:right;
	}

	.checked .item-info {
	display: block;
	}
	</style>

	<script type="text/javascript">

	var json = {
	"title": "ma checklist",
	"checklist" : [
	{"title" : "item 1", "checked" : "text checked"} ,
	{"title" : "item 2", "checked" : "text checked"} ,
	{"title" : "item 3", "checked" : "text checked"} ,
	]
	};


	$(document).ready(function() {
	// retrieve json file

	// $.getJSON('checklist.json', function(data) {
	var data = json;

	$('h1').html(data.title);

	var cnt = document.getElementById('checklist-content');

	$.each(data.checklist, function(k, v) {
	var elt = document.createElement('div');

	elt.innerHTML = '<div class="item"><span>' + v.title + '</span><span class="item-info">' + v.checked + '</span></div>';

	$(elt).click(function() {
	if ($(this).hasClass('checked')) {
	$(this).removeClass('checked');
	}
	else {
	$(this).addClass('checked');
	}

	});
	cnt.appendChild(elt);
	});
	});

	// });
	</script>
	</head>
	<body>
	<div class="container-fluid" id="container">
	<h1>Title</h1>
	<div id="checklist-content">

	</div>
	</div>

	</body>
	</html>