How do I make a whole li element clickable to toggle checkmark? (Bootstrap 4)

I have a list where each line has name on the left and a checkmark on the right, I want to be able to just click on the whole element to toggle the checkbox, be it with javascript or html.

  <li href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
    <span><img class="menu-icon" src="icon.png">Menu 1</span>
    <label class="checkbox my-auto">
      <input type="checkbox" checked="checked">
      <span class="checkmark"></span>
    </label>
  </li>