diff --git a/app/javascript/controllers/checkbox_toggle_controller.js b/app/javascript/controllers/checkbox_toggle_controller.js
new file mode 100644
index 000000000..e4f88dfc6
--- /dev/null
+++ b/app/javascript/controllers/checkbox_toggle_controller.js
@@ -0,0 +1,32 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+ static targets = ["selectionEntry", "toggleButton"]
+
+ toggle() {
+ const shouldShow = this.selectionEntryTargets[0].classList.contains("hidden")
+
+ this.selectionEntryTargets.forEach((el) => {
+ if (shouldShow) {
+ el.classList.remove("hidden")
+ } else {
+ el.classList.add("hidden")
+ }
+ })
+
+ if (!shouldShow) {
+ const bulkSelectElement = this.element.closest("[data-controller~='bulk-select']");
+ if (bulkSelectElement) {
+ const bulkSelectController = this.application.getControllerForElementAndIdentifier(
+ bulkSelectElement,
+ "bulk-select"
+ );
+ if (bulkSelectController) {
+ bulkSelectController.deselectAll();
+ }
+ }
+ }
+
+ this.toggleButtonTarget.classList.toggle("bg-surface", shouldShow)
+ }
+}
diff --git a/app/views/entries/_entry_group.html.erb b/app/views/entries/_entry_group.html.erb
index 2ee8954c1..7a0d14470 100644
--- a/app/views/entries/_entry_group.html.erb
+++ b/app/views/entries/_entry_group.html.erb
@@ -4,9 +4,12 @@
<%= check_box_tag "#{date}_entries_selection",
- class: ["checkbox checkbox--light", "hidden": entries.size == 0],
+ class: ["checkbox checkbox--light hidden lg:block", "lg:hidden": entries.size == 0],
id: "selection_entry_#{date}",
- data: { action: "bulk-select#toggleGroupSelection" } %>
+ data: {
+ action: "bulk-select#toggleGroupSelection",
+ checkbox_toggle_target: "selectionEntry"
+ } %>
<%= tag.span I18n.l(date, format: :long) %>
diff --git a/app/views/transactions/_transaction.html.erb b/app/views/transactions/_transaction.html.erb
index 9b87c7aff..86dd0e193 100644
--- a/app/views/transactions/_transaction.html.erb
+++ b/app/views/transactions/_transaction.html.erb
@@ -9,11 +9,12 @@
<%= check_box_tag dom_id(entry, "selection"),
disabled: transaction.transfer.present?,
- class: "checkbox checkbox--light",
+ class: "checkbox checkbox--light hidden lg:block",
data: {
id: entry.id,
"bulk-select-target": "row",
- action: "bulk-select#toggleRowSelection"
+ action: "bulk-select#toggleRowSelection",
+ checkbox_toggle_target: "selectionEntry"
} %>
diff --git a/app/views/transactions/index.html.erb b/app/views/transactions/index.html.erb
index 47eb8ec81..ea9f8b5d9 100644
--- a/app/views/transactions/index.html.erb
+++ b/app/views/transactions/index.html.erb
@@ -46,7 +46,7 @@
<%= render "summary", totals: @search.totals %>
"
data-bulk-select-plural-label-value="<%= t(".transactions") %>"
class="flex flex-col bg-container rounded-xl shadow-border-xs p-4">
diff --git a/app/views/transactions/searches/_form.html.erb b/app/views/transactions/searches/_form.html.erb
index d11fe5cff..9ca4bb7a7 100644
--- a/app/views/transactions/searches/_form.html.erb
+++ b/app/views/transactions/searches/_form.html.erb
@@ -30,5 +30,15 @@
<%= render "transactions/searches/menu", form: form %>
<% end %>
<% end %>
+
+ <%= button_tag type: "button",
+ id: "toggle-checkboxes-button",
+ class: "lg:hidden font-medium whitespace-nowrap inline-flex items-center gap-1 rounded-lg px-3 py-2 text-sm text-primary border border-secondary hover:bg-surface-hover",
+ data: {
+ action: "click->checkbox-toggle#toggle",
+ checkbox_toggle_target: "toggleButton"
+ } do %>
+ <%= icon("list-todo") %>
+ <% end %>
<% end %>