diff --git a/frontend/src/components/Editor.vue b/frontend/src/components/Editor.vue
index 6f759210..d1403f9b 100644
--- a/frontend/src/components/Editor.vue
+++ b/frontend/src/components/Editor.vue
@@ -143,9 +143,25 @@ export default {
         }
       ])
     },
+    replaceLine (line, text) {
+      const length = this.editor.getModel().getLineLength(line)
+
+      this.editor.executeEdits('', [
+        { range: new window.monaco.Range(line, 1, line, length + 1), text }
+      ])
+    },
     revealLine (line) {
       this.editor.revealLineInCenter(line)
     },
+    switchTodo (line, checked) {
+      if (checked) {
+        const value = this.editor.getModel().getLineContent(line).replace('[ ]', '[x]')
+        this.replaceLine(line, value)
+      } else {
+        const value = this.editor.getModel().getLineContent(line).replace('[x]', '[ ]')
+        this.replaceLine(line, value)
+      }
+    },
     setValue (val) {
       this.editor.getModel().setValue(val)
     }
diff --git a/frontend/src/components/View.vue b/frontend/src/components/View.vue
index c371711b..1f199fc8 100644
--- a/frontend/src/components/View.vue
+++ b/frontend/src/components/View.vue
@@ -62,7 +62,7 @@ export default {
 
           return ''
         }
-      }).use(TaskLists).use(MermaidPlugin).use(Plantuml, {
+      }).use(TaskLists, {enabled: true}).use(MermaidPlugin).use(Plantuml, {
         generateSource: umlCode => {
           return 'api/plantuml/png?data=' + encodeURIComponent(umlCode)
         }
@@ -92,6 +92,11 @@ export default {
       })
     },
     handleClick (e) {
+      if (e.target.tagName === 'INPUT' && e.target.parentElement.classList.contains('source-line')) {
+        this.switchTodo(parseInt(e.target.parentElement.dataset['sourceLine']), e.target.checked)
+        return
+      }
+
       if (e.target.classList.contains('source-line')) {
         this.syncScroll(parseInt(e.target.dataset['sourceLine']))
         e.preventDefault()
@@ -100,6 +105,9 @@ export default {
     syncScroll (line) {
       this.$emit('sync-scroll', line)
     },
+    switchTodo (line, checked) {
+      this.$emit('switch-todo', line, checked)
+    },
     revealLine (line) {
       const nodes = document.querySelectorAll('.view .source-line')
       for (let ele of nodes) {
diff --git a/frontend/src/pages/Home.vue b/frontend/src/pages/Home.vue
index a75d7dad..73e2915b 100644
--- a/frontend/src/pages/Home.vue
+++ b/frontend/src/pages/Home.vue
@@ -21,7 +21,13 @@
         @scroll-line="syncScrollView"
         @paste-img="pasteImg"
         @save="saveFile"></Editor>
-      <XView ref="view" class="view" :value="value" :file-name="fileName" @sync-scroll="syncScrollEditor"></XView>
+      <XView
+        ref="view"
+        class="view"
+        :value="value"
+        :file-name="fileName"
+        @sync-scroll="syncScrollEditor"
+        @switch-todo="switchTodoEditor"></XView>
     </div>
   </div>
 </template>
@@ -95,6 +101,9 @@ export default {
         this.$refs.editor.insert(`![图片](api/attachment?path=${encodeURIComponent(filePath)})\n`)
       })
     },
+    switchTodoEditor (line, checked) {
+      this.$refs.editor.switchTodo(line, checked)
+    },
     syncScrollEditor (line) {
       this.$refs.editor.revealLine(line)
     },