Make checking boxes not require full page reload

internal/conf/templates/view.tmpl.html

@@ -1,6 +1,13 @@
 {{define "title"}}{{.note.Title}}{{end}}
 {{define "main"}}
-<div>
+<style>
+li:has(> input[type="checkbox"]) {
+    padding-top: 0.1em;
+    padding-bottom: 0.1em;
+    cursor: default;
+}
+</style>
+<div id="noteContent">
     {{.note.BodyRendered}}
 </div>
 <div class="d-flex justify-content-between">
@@ -77,17 +84,27 @@
 {{end}}
 
 <script>
-let checkBoxes = document.querySelectorAll('input[type=checkbox]')
-for (const i in checkBoxes) {
+let checkBoxes = document.querySelectorAll('input[type=checkbox]');
+let noteContentWrapper = document.querySelector('#noteContent');
+console.log(checkBoxes.keys())
+
+for (const i of checkBoxes.keys()) {
     let box = checkBoxes[i]
+    let parent = box.parentNode
     box.disabled = false
 
-    box.onchange = function(event) {
-        let form = new FormData()
-        form.append("box", i)
+    box.onclick = function(event) {
+        return false;
+    }
+
+    parent.onclick = function(event) {
+        let form = new FormData();
+        form.append("box", i);
 
         fetch("togglebox/", {method: "POST", body: form}).then((response) => {
-            location.reload();
+            return response.json();
+        }).then((json) => {
+            box.checked = json.checked;
         })
     }
 }