I like this solution for a shopping list with a shopping-mode within Joplin:
Adding on to the solutions presented there, if you have just a few two to-do notes, CSS can be used to move completed to-dos to the end. For example:
- [ ] Task
- [x] list
- [ ] here
- [ ] ...
<style>
/* ul:has(...): Any Unordered List that contains
input[type="checkbox"]: A checkbox element. */
ul:has(input[type="checkbox"]) {
/* Use flex: This lets us re-order list items with the
`order: 0` or `order: 1` below. */
display: flex;
flex-direction: column;
}
/* List items within checklists */
ul:has(input[type="checkbox"]) > li {
/* Default to start */
order: 0;
}
/* List items that contain checked checkboxes */
/* Edit: Changed :has(input[checked]) to :has(> * > input[checked])
to fix nested checklists not sorted correctly */
ul:has(input[type="checkbox"]) > li:has(> * > input[checked]) {
/* Move to end */
order: 1;
}
</style>
Note: This only moves completed to-dos to the end in the note viewer and doesn't change the keyboard navigation ordering of the checkboxes.