Adding a second trigger breaks change trigger

[BrendanMartin]

I have a form with checkboxes that successfully triggers requests with hx-trigger="change", but when I add a button to cancel selections, and try appending a trigger like:

hx-trigger="change, click[event.target.matches('.btn')]"

now the checkboxes are uncheckable and no requests are submitted.

[HimashaHerath]

The issue comes down to how HTMX registers event listeners under the hood. When you add a click[condition] trigger alongside change, HTMX attaches a click listener to the element. The problem is that on checkboxes, the browser fires click first and then toggles the checked state before firing change. That HTMX-registered click listener can interfere with that sequence — even when your filter condition evaluates to false — effectively swallowing the event before the browser gets to flip the checkbox.

The fix is to use the from: modifier to explicitly tell HTMX where each event should come from, so it only listens on the right elements:

<form hx-post="/endpoint"
      hx-trigger="change from:input[type=checkbox], click[event.target.matches(.btn)]">
  <input type="checkbox" name="item1" />
  <input type="checkbox" name="item2" />
  <button class="btn" type="button">Cancel</button>
</form>

By scoping change to input[type=checkbox], HTMX only attaches the change listener to those elements, leaving the click listener scoped separately. The checkboxes will toggle normally again.

If you want to be even more explicit (and I usually prefer this for clarity), split the cancel button into its own HTMX element entirely:

<form hx-post="/update" hx-trigger="change">
  <input type="checkbox" name="item1" />
  <input type="checkbox" name="item2" />
</form>

<button class="btn"
        hx-post="/cancel"
        hx-target="..."
        hx-trigger="click">
  Cancel
</button>

Separating the triggers onto separate elements removes the ambiguity completely and makes each behavior easier to reason about individually.